Currently RadChart provides 27 2D Chart types for SL/WPF. You can easily customise the existing chart types to create a more complex series like the box plot(also known as box-and-whisker diagram and widely spread in descriptive statistics).

This blog post will demonstrate how to create Box Plot and Scatter Error bars by reusing the default Styles of the CandleStick and Scatter series and adding custom CandleStick / CandleStickSeriesDefinition (ScatterPoint/ ScatterSeriesDefinition) pair of classes.

Box Plot:

The BoxPlot have five number summaries: the smallest observation (sample minimum), lower quartile(Q1), median (Q2), upper quartile(Q3), and largest observation (sample maximum).For the purpose the Open, Close, High and Low values of the CandleStick will be used with retemplating the Series Definition to add the additional Median Line visual. You will also need to create custom CandleStick / CandleStickSeriesDefinition pair of classes (to calculate the necessary coordinates for the additional Line).

1. Add the additional Line visual(s) in the default template of the CandleStick Chart type:

- A new part with Name “PART_CustomLine” is added for the Median Line (percentile) that is to be shown:

  1. <telerik:ParametricLine x:Name="PART_CustomLine"
  2.                                   LineStyle="{TemplateBinding ItemStyle}"
  3.                                   StrokeThickness="{TemplateBinding LineThickness}"
  4.                                   X1="{Binding Center}"
  5.                                   Y1="{Binding CustomMinValue}"
  6.                                   X2="{Binding Center}"
  7.                                   Y2="{Binding CustomMaxValue}" />

2. Create new CustomCandleStick class that inherits the CandleStick class and set the CustomLine as set in the template as Parametric Line. A few more methods are added in order to calculate the necessary coordinates for the additional Line visual, so that it can be positioned on the Plot Area:

- void UpdateParametricLinesParameters() – overridden from the CandleStick class

- void UpdateParametricLinesCoordinates(Size constraint) – overridden form the CandleStick class

- DataRange CalculateRange(double value)

3. Create new class that inherits the CandleStickSeriesDefinition class and override the CreateChartItem() method so that the CustomCandleStick becomes a brand new Series Definition.

The full source code for creating Box Plot with the approach can be downloaded from here.

The result is shown below:


Error Bar:

Since we will need two crossing Lines to achieve the Error Bar Chart we can add them in the default Scatter Series Style like this:

  1. <Style x:Key="CustomScatterPointStyle"
  2.               TargetType="demo:ScatterErrorBar">
  3.               <Setter Property="Template" >
  4.                   <Setter.Value>
  5.                       <ControlTemplate TargetType="demo:ScatterErrorBar">
  6.                           <Canvas>
  7.                               <Line Stroke="Black"
  8.                                     Y1="{TemplateBinding MinValueY}"
  9.                                     Y2="{TemplateBinding MaxValueY}" />
  10.                               <Line Stroke="Black"
  11.                                     X1="-15" X2="15"
  12.                                     Y1="{TemplateBinding StartPointY}"
  13.                                     Y2="{TemplateBinding StartPointY}" />
  15.                               <telerik:PointMark x:Name="PART_PointMark"
  16.                                                  Canvas.Top="{TemplateBinding StartPointY}"
  17.                                                  ShapeStyle="{TemplateBinding PointMarkShapeStyle}"
  18.                                                  Size="{TemplateBinding PointSize}" />
  19.                           </Canvas>
  20.                       </ControlTemplate>
  21.                   </Setter.Value>
  22.               </Setter>
  23.           </Style>

The first one is Vertical and the second one is Horizontal Line (with X1 and X2 coordinates hardcoded for better positioning). Since the Scatter Series doesn’t have MinValueY, MaxValueY or StartPointY properties needed for drawing the Lines they should be registered as dependency properties. This is done as follows:

- Create new ScatterErrorBar class that inherits the ScatterPoint class and register the dependency properties there. A few more methods are added in order to accommodate the necessary coordinate calculations for the additional visual elements that will be added to the template:

1. void CreatePoints(Size arrangedBounds) – overridden from the ScatterPoint class

2. double CalculateMinValueY(Size arrangedBounds)

3. double CalculateMaxValueY(Size arrangedBounds)

4. DataRange CalculateRange(double value)

- Create new ScatterErrorSeriesDefinition by inheriting the ScatterSeriesDefinition class and override the CreateChartItem() method that returns the ScatterErrorBar class. This way you create brand new Series Definition -ScatterErrorBar that is used as TargetType in the Style mentioned above. You can create a ScatterErrorBar Chart by setting YValue for the Scatterpoint and MinValue and MaxValue that will be used to position the crossing Lines.

The full source code for ErrorBar can be downloaded from here!

The result is shown below:


About the Author

Evgenia Milcheva

Front-End Developer
Telerik XAML Team

Related Posts