How to create the Tornado Chart in WPF Charts?
This article describes how to create a Tornado Chart using the Bar and RangeColumn in WPF Charts.
Tornado Chart is a special type of bar chart where the bars extend from the defined midpoint. Two series are required for a chart to achieve Tornado Chart by the following these steps.
Tornado Chart using the Bar Chart
Step1: Create Bar Series with Binding of ItemSource, XBindingPath, and YBindingPath properties.
Step2: 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
Tornado Chart using the Range Column Chart
Step1: Create RangeColumn series with Binding of ItemSource, XBindingPath, and YBindingPath properties.
Step2: 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!
