Edit this page

Customizing CartesianChart Series

This article demonstrates how you can change the default look of the RadCartesianChart series.

Customizing Point Series

PointSeries

This series expose the DefaultVisualStyle property. It is of type Style and determines the appearance of the Path element used to visualize the PointSeries. Your custom style should target the native Path component. You can set the property like this:

XAML

<telerik:PointSeries.DefaultVisualStyle>
    <Style TargetType="Path">
          <Setter Property="Fill" Value="YellowGreen"/>
          <Setter Property="Stroke" Value="Red"/>
          <Setter Property="StrokeThickness" Value="1"/>
    </Style>
</telerik:PointSeries.DefaultVisualStyle>  

Since Q1 2014 all series exposing the DefaultVisualStyle property, also expose the DefaultVisualStyleSelector property. It is of type StyleSelector and gets or sets custom style-selection logic for a style that can be applied to each generated element.

radchartview-styles-and-templates-pointseries-defaultvisualstyle

ScatterPointSeries

This series expose the DefaultVisualStyle property. It is of type Style and determines the appearance of the Path element used to visualize the ScatterPointSeries. Your custom style should target the native Path component. You can set the property like this:

XAML

<telerik:ScatterPointSeries.DefaultVisualStyle>
    <Style TargetType="Path">
        <Setter Property="Stroke" Value="Green"/>
        <Setter Property="Fill" Value="Orange"/>
        <Setter Property="StrokeThickness" Value="2"/>
    </Style>
</telerik:ScatterPointSeries.DefaultVisualStyle>  

Since Q1 2014 all series exposing the DefaultVisualStyle property, also expose the DefaultVisualStyleSelector property. It is of type StyleSelector and gets or sets custom style-selection logic for a style that can be applied to each generated element.

radchartview-styles-and-templates-scatterpointseries-defaultvisualstyle

Customizing Line Series

LineSeries

This series expose the StrokeShapeStyle property. It is of type Style and determines the appearance of the Path element used to visualize the LineSeries. Your custom style should target the native Path component. You can set the property like this:

XAML

<telerik:LineSeries.StrokeShapeStyle>
    <Style TargetType="Path">
        <Setter Property="Stroke" Value="Red"/>
        <Setter Property="StrokeDashArray" Value="10 5"/>
        <Setter Property="StrokeThickness" Value="3"/>
    </Style>
</telerik:LineSeries.StrokeShapeStyle>

radchartview-styles-and-templates-Line Series-Stroke Shape Style

SplineSeries

This series expose the StrokeShapeStyle property. It is of type Style and determines the appearance of the Path element used to visualize the SplineSeries. Your custom style should target the native Path component. You can set the property like this:

XAML

<telerik:SplineSeries.StrokeShapeStyle>
    <Style TargetType="Path">
        <Setter Property="Stroke" Value="Red"/>
        <Setter Property="StrokeDashArray" Value="10 5"/>
        <Setter Property="StrokeThickness" Value="3"/>
    </Style>
</telerik:SplineSeries.StrokeShapeStyle>    

radchartview-styles-and-templates-Spline Series-Stroke Shape Style

StepLineSeries

This series expose the StrokeShapeStyle property. It is of type Style and determines the appearance of the Path element used to visualize the StepLineSeries. Your custom style should target the native Path component. You can set the property like this:

XAML

<telerik:StepLineSeries.StrokeShapeStyle>
    <Style TargetType="Path">
        <Setter Property="Stroke" Value="Red"/>
        <Setter Property="StrokeDashArray" Value="10 5"/>
        <Setter Property="StrokeThickness" Value="3"/>
    </Style>
</telerik:StepLineSeries.StrokeShapeStyle>        

radchartview-styles-and-templates-Step Line Series-Stroke Shape Style

ScatterLineSeries

This series expose the StrokeShapeStyle property. It is of type Style and determines the appearance of the Path element used to visualize the ScatterLineSeries. Your custom style should target the native Path component. You can set the property like this:

XAML

<telerik:ScatterLineSeries.StrokeShapeStyle>
  <Style TargetType="Path">
      <Setter Property="Stroke" Value="Red"/>
      <Setter Property="StrokeDashArray" Value="10 5"/>
      <Setter Property="StrokeThickness" Value="3"/>
  </Style>
</telerik:ScatterLineSeries.StrokeShapeStyle>

radchartview-styles-and-templates-Scatter Line Series-Stroke Shape Style

ScatterSplineSeries

This series expose the StrokeShapeStyle property. It is of type Style and determines the appearance of the Path element used to visualize the ScatterSplineSeries. Your custom style should target the native Path component. You can set the property like this:

XAML

<telerik:ScatterSplineSeries.StrokeShapeStyle>
  <Style TargetType="Path">
      <Setter Property="Stroke" Value="Red"/>
      <Setter Property="StrokeDashArray" Value="10 5"/>
      <Setter Property="StrokeThickness" Value="3"/>
  </Style>
</telerik:ScatterSplineSeries.StrokeShapeStyle>

radchartview-styles-and-templates-Scatter Spline Series-Stroke Shape Style

Customizing Area Series

AreaSeries

This series expose the following styling properties:

  • StrokeShapeStyle - it is of type Style and determines the appearance of the series. Your custom style should target the native Path component.

    XAML

    <telerik:AreaSeries.StrokeShapeStyle>
        <Style TargetType="Path">
            <Setter Property="Stroke" Value="Red"/>
            <Setter Property="StrokeDashArray" Value="10 5"/>
            <Setter Property="StrokeThickness" Value="3"/>
        </Style>
    </telerik:AreaSeries.StrokeShapeStyle>
    

    radchartview-styles-and-templates-Area Series-Stroke Shape Style

  • AreaShapeStyle - it is of type Style and determines the appearance of the area, locked between the axis and the line. Your custom style should target the native Path component.

    XAML

    <telerik:AreaSeries.AreaShapeStyle>
        <Style TargetType="Path">
            <Setter Property="Fill" Value="Bisque"/>
        </Style>
    </telerik:AreaSeries.AreaShapeStyle>          
    

    radchartview-styles-and-templates-Area Series-Area Shape Style

RangeSeries

This series expose the following styling properties:

  • StrokeShapeStyle - it is of type Style and determines the appearance of the series. Your custom style should target the native Path component.

    XAML

    <telerik:RangeSeries.StrokeShapeStyle>
        <Style TargetType="Path">
            <Setter Property="Stroke" Value="Red"/>
            <Setter Property="StrokeDashArray" Value="10 5"/>
            <Setter Property="StrokeThickness" Value="3"/>
        </Style>
    </telerik:RangeSeries.StrokeShapeStyle>
    

    radchartview-styles-and-templates-Area Series-Range Area Shape Style

  • StrokeMode - it is Enumeration type and determines how the RangeSeries area outline should be painted or not. By default is set to LowAndHighPoints.

    XAML

    <telerik:RangeSeries  StrokeMode="HighPoints" >
        <telerik:RangeSeries.StrokeShapeStyle>
            <Style TargetType="Path">
                <Setter Property="Stroke" Value="Red"/>
                <Setter Property="StrokeDashArray" Value="10 5"/>
                <Setter Property="StrokeThickness" Value="3"/>
            </Style>
        </telerik:RangeSeries.StrokeShapeStyle>
    </telerik:RangeSeries>    
    

    radchartview-styles-and-templates-Area Series-Range Area Shape Style

  • AreaShapeStyle - it is of type Style and determines the appearance of the area, locked between the axis and the line. Your custom style should target the native Path component.

    XAML

    <telerik:RangeSeries.AreaShapeStyle>
        <Style TargetType="Path">
            <Setter Property="Fill" Value="Bisque"/>
        </Style>
    </telerik:RangeSeries.AreaShapeStyle>         
    

    radchartview-styles-and-templates-Area Series-Range Area Shape Style

RangeSeries expose several additional properties you can use to style its appearance: Stroke, StrokeThickness, Fill, DashArray.

StepAreaSeries

This series expose the following styling properties:

  • StrokeShapeStyle - it is of type Style and determines the appearance of the series. Your custom style should target the native Path component.

    XAML

    <telerik:StepAreaSeries.StrokeShapeStyle>
        <Style TargetType="Path">
            <Setter Property="Stroke" Value="Red"/>
            <Setter Property="StrokeDashArray" Value="10 5"/>
            <Setter Property="StrokeThickness" Value="3"/>
        </Style>
    </telerik:StepAreaSeries.StrokeShapeStyle>
    

    radchartview-styles-and-templates-Step Area Series-Stroke Shape Style

  • AreaShapeStyle - it is of type Style and determines the appearance of the area, locked between the axis and the line. Your custom style should target the native Path component.

    XAML

    <telerik:StepAreaSeries.AreaShapeStyle>
        <Style TargetType="Path">
            <Setter Property="Fill" Value="Bisque"/>
        </Style>
    </telerik:StepAreaSeries.AreaShapeStyle>        
    

    radchartview-styles-and-templates-Step Area Series-Area Shape Style

SplineAreaSeries

This series expose the following styling properties:

  • StrokeShapeStyle - it is of type Style and determines the appearance of the series. Your custom style should target the native Path component.

    XAML

    <telerik:SplineAreaSeries.StrokeShapeStyle>
        <Style TargetType="Path">
            <Setter Property="Stroke" Value="Red"/>
            <Setter Property="StrokeDashArray" Value="10 5"/>
            <Setter Property="StrokeThickness" Value="3"/>
        </Style>
    </telerik:SplineAreaSeries.StrokeShapeStyle>          
    

    radchartview-styles-and-templates-Spline Area Series-Stroke Shape Style

  • AreaShapeStyle - it is of type Style and determines the appearance of the area, locked between the axis and the line. Your custom style should target the native Path component.

    XAML

    <telerik:SplineAreaSeries.AreaShapeStyle>
        <Style TargetType="Path">
            <Setter Property="Fill" Value="Bisque"/>
        </Style>
    </telerik:SplineAreaSeries.AreaShapeStyle>        
    

    radchartview-styles-and-templates-Spline Area Series-Area Shape Style

ScatterAreaSeries

This series expose the following styling properties:

  • StrokeShapeStyle - it is of type Style and determines the appearance of the series. Your custom style should target the native Path component.

    XAML

     <telerik:ScatterAreaSeries.StrokeShapeStyle>
        <Style TargetType="Path">
            <Setter Property="Stroke" Value="Red"/>
            <Setter Property="StrokeDashArray" Value="10 5"/>
            <Setter Property="StrokeThickness" Value="3"/>
        </Style>
    </telerik:ScatterAreaSeries.StrokeShapeStyle>
    

    radchartview-styles-and-templates-Scatter Area Series-Stroke Shape Style

  • AreaShapeStyle - it is of type Style and determines the appearance of the area, locked between the axis and the line. Your custom style should target the native Path component. You can set the property in XAML like this:

    XAML

    <telerik:ScatterAreaSeries.AreaShapeStyle>
        <Style TargetType="Path">
            <Setter Property="Fill" Value="Bisque"/>
        </Style>
    </telerik:ScatterAreaSeries.AreaShapeStyle>
    

    radchartview-styles-and-templates-Scatter Area Series-Area Shape Style

ScatterSplineAreaSeries

This series expose the following styling properties:

  • StrokeShapeStyle - it is of type Style and determines the appearance of the series. Your custom style should target the native Path component. You can set the property in XAML like this:

    XAML

    <telerik:ScatterSplineAreaSeries.StrokeShapeStyle>
        <Style TargetType="Path">
            <Setter Property="Stroke" Value="Red"/>
            <Setter Property="StrokeDashArray" Value="10 5"/>
            <Setter Property="StrokeThickness" Value="3"/>
        </Style>
    </telerik:ScatterSplineAreaSeries.StrokeShapeStyle>
    

    radchartview-styles-and-templates-Scatter Spline Area Series-Stroke Shape Style

  • AreaShapeStyle - it is of type Style and determines the appearance of the area, locked between the axis and the line. Your custom style should target the native Path component. You can set the property in XAML like this:

    XAML

    <telerik:ScatterSplineAreaSeries.AreaShapeStyle>
        <Style TargetType="Path">
            <Setter Property="Fill" Value="Bisque"/>
        </Style>
    </telerik:ScatterSplineAreaSeries.AreaShapeStyle>
    

    radchartview-styles-and-templates-Scatter Spline Area Series-Area Shape Style

Customizing Bar Series

BarSeries

This series expose the DefaultVisualStyle property. It is of type Style and determines the appearance of the series. Your custom style should target the native Border component. You can set the property in XAML like this:

XAML

<telerik:BarSeries.DefaultVisualStyle>
  <Style TargetType="Border">
      <Setter Property="Background" Value="YellowGreen"/>
      <Setter Property="BorderBrush" Value="Red"/>
      <Setter Property="BorderThickness" Value="2"/>
  </Style>
</telerik:BarSeries.DefaultVisualStyle>

Since Q1 2014 all series exposing the DefaultVisualStyle property, also expose the DefaultVisualStyleSelector property. It is of type StyleSelector and gets or sets custom style-selection logic for a style that can be applied to each generated element.

radchartview-styles-and-templates-Bar Series-defaultvisualstyle

RangeBarSeries

This series expose the DefaultVisualStyle property. It is of type Style and determines the appearance of the series. Your custom style should target the native Border component. You can set the property in XAML like this:

XAML

<telerik:RangeBarSeries.DefaultVisualStyle>
  <Style TargetType="Border">
      <Setter Property="Background" Value="YellowGreen"/>
      <Setter Property="BorderBrush" Value="Red"/>
      <Setter Property="BorderThickness" Value="2"/>
  </Style>
</telerik:RangeBarSeries.DefaultVisualStyle>

Since Q1 2014 all series exposing the DefaultVisualStyle property, also expose the DefaultVisualStyleSelector property. It is of type StyleSelector and gets or sets custom style-selection logic for a style that can be applied to each generated element.

radchartview-styles-and-templates-Range Bar Series-defaultvisualstyle

Customizing Financial Series

OhlcSeries

This series expose the DefaultVisualStyle property. It is of type Style and determines the appearance of the series. Your custom style should target the native OhlcStick component. You can set the property in XAML like this:

XAML

<telerik:OhlcSeries.DefaultVisualStyle>
  <Style TargetType="telerikChartView:OhlcStick">
      <Setter Property="MinHeight" Value="1"/>
      <Setter Property="StrokeThickness" Value="1"/>
      <Setter Property="UpStroke" Value="GreenYellow"/>
      <Setter Property="DownStroke" Value="Red"/>
  </Style>
</telerik:OhlcSeries.DefaultVisualStyle>

Since Q1 2014 all series exposing the DefaultVisualStyle property, also expose the DefaultVisualStyleSelector property. It is of type StyleSelector and gets or sets custom style-selection logic for a style that can be applied to each generated element.

radchartview-styles-and-templates-Ohlc Series-defaultvisualstyle

CandlestickSeries

This series expose the DefaultVisualStyle property. It is of type Style and determines the appearance of the series. Your custom style should target the native Candlestick component. You can set the property in XAML like this:

XAML

<telerik:CandlestickSeries.DefaultVisualStyle>
    <Style TargetType="telerikChartView:Candlestick">
        <Setter Property="MinHeight" Value="1"/>
        <Setter Property="StrokeThickness" Value="1"/>
        <Setter Property="UpStroke" Value="GreenYellow"/>
        <Setter Property="DownStroke" Value="Red"/>
    </Style>
</telerik:CandlestickSeries.DefaultVisualStyle>

Since Q1 2014 all series exposing the DefaultVisualStyle property, also expose the DefaultVisualStyleSelector property. It is of type StyleSelector and gets or sets custom style-selection logic for a style that can be applied to each generated element.

radchartview-styles-and-templates-Candlestick Series-defaultvisualstyle

Customizing DataPoints DataTemplate

All series supported by the RadCartesianChart expose a PointTemplate property.

This property should be used only when the DefaultVisualStyle cannot be used.

It is of type DataTemplate and gets or sets the template that describes the visual representation of the DataPoints in a series. You can set the property in XAML like this:

XAML

<telerik:PointSeries>
  <telerik:PointSeries.PointTemplate>
      <DataTemplate>
          <Ellipse Height="5" Width="11" Fill="Blue"/>
      </DataTemplate>
  </telerik:PointSeries.PointTemplate>
</telerik:PointSeries>

The above definition will change the default visualization of the DataPoint visuals like this:

radchartview-custom-point-template

See Also