Edit this page

Customizing CartesianChart Series

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

Customizing Data Points Using DefaultVisualStyle

The different chart series use different visual elements to display their data points - a bar, an ellipse, etc. You can apply a custom style for those elements via the DefaultVisualStyle property. The property accepts a value of type Style which targets the visual element of the corresponding series. There is an additional DefaultVisualStyleSelector property which can be used to apply different style for the different data point visuals in a series.

[XAML] Example 1: Setting DefaultVisualStyle of BarSeries

<telerik:BarSeries>
    <telerik:BarSeries.DefaultVisualStyle>
        <Style TargetType="Border">
            <Setter Property="Background" Value="#F47748" />
        </Style>
    </telerik:BarSeries.DefaultVisualStyle>
</telerik:BarSeries>

Since Q1 2016, all Cartesian series (excluding RangeSeries) are rendering default visuals using the DefaultVisualStyle property. So, you can use it also with line and area series to display their data point visuals which don't exist by default. Note that when using line or area series you will need to set also the size of the visual. Otherwise it won't be displayed.

[XAML] Example 2: Setting DefaultVisualStyle of LineSeries

<telerik:LineSeries>
  <telerik:LineSeries.DefaultVisualStyle>
    <Style TargetType="Path">
        <Setter Property="Width" Value="10" />
        <Setter Property="Height" Value="10" />
        <Setter Property="Fill" Value="#FF5AC3" />
    </Style>
  </telerik:LineSeries.DefaultVisualStyle>
</telerik:LineSeries>

When using a Palette the series' default visual will ignore the color defined in the DefaultVisualStyle and it will use the one provided by the palette.

Customizing Data Points Using PointTemplate

All series supported by the RadCartesianChart expose a PointTemplate property. It is of type DataTemplate and gets or sets the template that describes the visual representation of the data points in a series. There is an additiona PointTemplateSelector property which can be used to apply different visuals for the different data points in a series.

Using PointTemplate is recommended only when the DefaultVisualStyle cannot be used.

[XAML] Example 3: Setting PointTemplate

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

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.

[XAML] Example 4: Setting PointSeries DefaultVisualStyle

<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.

[XAML] Example 5: Setting ScatterPointSeries DefaultVisualStyle

<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

Since R1 2016 the chart's line series have default visual elements for their data points. This means that you can use the DefaultVisualStyle property to customize the data points visuals.

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.

[XAML] Example 6: Setting LineSeries StrokeShapeStyle

<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.

[XAML] Example 7: Setting SplineSeries StrokeShapeStyle

<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.

[XAML] Example 8: Setting StepLineSeries StrokeShapeStyle

<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.

[XAML] Example 9: Setting ScatterLineSeries StrokeShapeStyle

<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.

[XAML] Example 10: Setting ScatterSplineSeries StrokeShapeStyle

<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] Example 11: Setting AreaSeries StrokeShapeStyle

    <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] Example 12: Setting AreaSeries AreaShapeStyle

    <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] Example 13: Setting RangeSeries StrokeShapeStyle

    <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] Example 14: Setting RangeSeries StrokeShapeStyle

    <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] Example 15: Setting RangeSeries AreaShapeStyle

    <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] Example 16: Setting StepAreaSeries StrokeShapeStyle

    <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] Example 17: Setting StepAreaSeries AreaShapeStyle

    <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] Example 18: Setting SplineAreaSeries StrokeShapeStyle

    <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] Example 19: Setting SplineAreaSeries AreaShapeStyle

    <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] Example 20: Setting ScatterAreaSeries StrokeShapeStyle

     <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.

    [XAML] Example 21: Setting ScatterAreaSeries AreaShapeStyle

    <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.

    [XAML] Example 22: Setting ScatterSplineAreaSeries StrokeShapeStyle

    <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.

    [XAML] Example 23: Setting ScatterSplineAreaSeries AreaShapeStyle

    <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.

[XAML] Example 24: Setting BarSeries DefaultVisualStyle

<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.

[XAML] Example 25: Setting RangeBarSeries DefaultVisualStyle

<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.

[XAML] Example 26: Setting OhlcSeries DefaultVisualStyle

<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.

[XAML] Example 27: Setting CandlestickSeries DefaultVisualStyle

<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

See Also