How to create a Tornado Chart using WPF SfCharts?
Description
This article describes how to create a Tornado Chart using the BarSeries and RangeColumnSeries in WPF SfCharts.
A Tornado Chart is a special type of bar chart where the bars extend in opposite directions from a central axis. It is commonly used for comparing two sets of data side by side. This effect is typically achieved using two series, following the steps below.
Creating a Tornado Chart using Bar series
Step 1: Define two BarSeries and bind them to your data using the ItemsSource, XBindingPath, and YBindingPath properties.
Step 2: By using the LabelTemplate in ChartAdornmentInfo class, you can display the model data in data marker as demonstrated in the following code example.
<!--Create Bar Series and bind Models property to ItemsSource-->
<chart:BarSeries SideBySideSeriesPlacement="False" EnableAnimation="True" ItemsSource="{Binding Models}" XBindingPath="Year" Interior="LightBlue" Palette="None" Label=" Export" YBindingPath="Export">
<chart:BarSeries.AdornmentsInfo>
<chart:ChartAdornmentInfo AdornmentsPosition="Top" ShowLabel="True"
HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="10">
</chart:ChartAdornmentInfo>
</chart:BarSeries.AdornmentsInfo>
</chart:BarSeries>
<chart:BarSeries EnableAnimation="True" ItemsSource="{Binding Models}"
XBindingPath="Year" Interior="LightCoral" YBindingPath="Import"
Palette="None" Label="Import">
<chart:BarSeries.AdornmentsInfo>
<chart:ChartAdornmentInfo AdornmentsPosition="Top" ShowLabel="True"
HorizontalAlignment="Center" VerticalAlignment="Center">
<!--LabelTemplate to show Positive values in Label of Series-->
<chart:ChartAdornmentInfo.LabelTemplate>
<DataTemplate>
<Grid>
<TextBlock FontSize="10"
Text="{Binding Converter={StaticResource ValueConverter}}"/>
</Grid>
</DataTemplate>
</chart:ChartAdornmentInfo.LabelTemplate>
</chart:ChartAdornmentInfo>
</chart:BarSeries.AdornmentsInfo>
</chart:BarSeries>Output
Creating a Tornado Chart using RangeColumn series
Step 1: Define two RangeColumn with binding of ItemsSource, XBindingPath, and YBindingPath properties.
Step 2: By using the LabelTemplate in ChartAdornmentInfo class, you can display the model data in data marker as demonstrated in the following code example.
<!--Create RangeColumnSeries and bind Models property to ItemsSource-->
<chart:RangeColumnSeries SideBySideSeriesPlacement="False" EnableAnimation="True" ItemsSource="{Binding Models}"
XBindingPath="DeptName" Interior="LightBlue" IsTransposed="True" Palette="None" High="PassStart" Low="Pass">
<!--To show label using ChartAdornmentInfo-->
<chart:RangeColumnSeries.AdornmentsInfo>
<chart:ChartAdornmentInfo AdornmentsPosition="Bottom" FontSize="10" ShowLabel="True" HorizontalAlignment="Center" VerticalAlignment="Center">
</chart:ChartAdornmentInfo>
</chart:RangeColumnSeries.AdornmentsInfo>
</chart:RangeColumnSeries>
<chart:RangeColumnSeries EnableAnimation="True" ItemsSource="{Binding Models}"
IsTransposed="True" XBindingPath="DeptName" Low="PassEnd"
Interior="LightCoral" High="Pass" Palette="None" > <!--To show label using ChartAdornmentInfo-->
<chart:RangeColumnSeries.AdornmentsInfo>
<chart:ChartAdornmentInfo AdornmentsPosition="Top"
ShowLabel="True" FontSize="10" HorizontalAlignment="Center"
VerticalAlignment="Center">
</chart:ChartAdornmentInfo>
</chart:RangeColumnSeries.AdornmentsInfo>
</chart:RangeColumnSeries>Output
You can download the complete sample in this GitHub Location.
See also
How to add a series side by side
How to display the axis labels in a particular format
How can you modify axis text elements without disturbing the axis labels
Conclusion
I hope you enjoyed learning about how to create the Tornado Chart in WPF Charts.
You can refer to our WPF Chart feature tour page to know about its other groundbreaking feature representations. You can also explore our WPF Chart documentation 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!
