How to create violin chart in WPF?
A Violin Plot, which is a hybrid of a Box Plot chart, is used to visualize data distribution and its probability density. WPF Charts support drawing a basic violin model by customizing the BoxAndWhiskerSeries segment rendering.
Basic Violin Plot
The following steps explain how to create a basic violin plot using the Box and Whisker Chart in WPF.
Step 1: Create an extended Box Plot Series (BoxAndWhiskerSeriesExt) and override its default segment with an extended Box Plot (BoxAndWhiskerSegmentExt) as shown below.
public class BoxAndWhiskerSeriesExt : BoxAndWhiskerSeries
{
protected override ChartSegment CreateSegment()
{
return new BoxAndWhiskerSegmentExt(this);
}
}
Step 2: In the extended Box Plot segment, change its appearance by using the CreateVisual method, which is used to create a violin path.
public class BoxAndWhiskerSegmentExt : BoxAndWhiskerSegment
{
…
public override UIElement CreateVisual(Size size)
{
var element = base.CreateVisual(size);
violinPath = new Path()
{
Tag = this,
Stretch = Stretch.Fill,
};
SetVisualBindings(violinPath);
(element as Canvas).Children.Add(violinPath);
return element;
}
}
Step3: The geometry path of the violin plot is created and updated as violinPath in the Update method as shown below.
public class BoxAndWhiskerSegmentExt : BoxAndWhiskerSegment
{
…
public override void Update(IChartTransformer transformer)
{
base.Update(transformer);
BoxAndWhiskerSegment baseSegment = this as BoxAndWhiskerSegment;
…
//Right side path
BezierSegment segment1 = new BezierSegment();
segment1.Point1 = new Point(centerLinePosition, minimumPoint.Y + (extensionValue * 2));
segment1.Point2 = new Point(tlPoint.X + (centerLinePosition - tlPoint.X) / 2 + extensionValue, brPoint.Y + (minimumPoint.Y - brPoint.Y) / 2);
segment1.Point3 = new Point(tlPoint.X, brPoint.Y);
pathFigure.Segments.Add(segment1);
…
PathGeometry geometry = new PathGeometry();
geometry.Figures.Add(pathFigure);
violinPath.Data = geometry;
}
}
Step4: Define the XAML configuration for the visual representation:
<chart:SfChart x:Name="boxWhiskerChart" AreaBorderBrush="#8e8e8e" Background="White"
Margin="10,20,20,20" VerticalAlignment="Bottom"
AreaBorderThickness="0,1,1,1"> … <local:BoxAndWhiskerSeriesExt ItemsSource="{Binding BoxWhiskerData}" XBindingPath="Department"
ShowOutlier="False" YBindingPath="Age"
ShowTooltip="True" BoxPlotMode="Normal" x:Name="boxSeries"/> </chart:SfChart>
Output
For a detailed view, explore the sample on GitHub.
Violin Plot Customization
To achieve smooth edges and interior filling in the violin chart, use predefined values for minimum, maximum, and median points with the provided SVG path as demonstrated below.
public class BoxAndWhiskerSegmentExt : BoxAndWhiskerSegment
{
…
public override void Update(IChartTransformer transformer)
{
base.Update(transformer);
…
string data = "M " + maximumPoint.X + "," + maximumPoint.Y
+ " C " + (brPoint.X - (maximumPoint.X - tlPoint.X) / 2 - extensionValue) + "," + (tlPoint.Y - (tlPoint.Y - maximumPoint.Y) / 2)
+ " " + brPoint.X + "," + tlPoint.Y
+ " " + brPoint.X + "," + medianPoint.Y
+ " C " + brPoint.X + "," + brPoint.Y
+ " " + (brPoint.X - (centerLinePosition - tlPoint.X) / 2 - extensionValue) + "," + (brPoint.Y + (minimumPoint.Y - brPoint.Y) / 2)
+ " " + centerLinePosition + "," + (minimumPoint.Y + (extensionValue * 2))
+ " C " + (tlPoint.X + (centerLinePosition - tlPoint.X) / 2 + extensionValue) + "," + (brPoint.Y + (minimumPoint.Y - brPoint.Y) / 2)
+ " " + tlPoint.X + "," + brPoint.Y
+ " " + tlPoint.X + "," + medianPoint.Y
+ " C " + tlPoint.X + "," + tlPoint.Y
+ " " + (tlPoint.X + (maximumPoint.X - tlPoint.X) / 2 + extensionValue) + "," + (tlPoint.Y - (tlPoint.Y - maximumPoint.Y) / 2)
+ " " + maximumPoint.X + "," + maximumPoint.Y;
violinPath.Data = Geometry.Parse(data);
}
}
Output
For a detailed view, explore the sample on GitHub
See also
How to customize the default shape of any series with the required shapes
How to create the Tornado Chart in WPF Charts
How to customize the outlier of Box Plot in WPF Charts
Conclusion
I hope you enjoyed learning how to create violin chart in WPF.
You can refer to our WPF Chart feature tour page know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WPF Chart Examples to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
