How to create a WinUI Tornado Chart (SfCartesianChart)?
This article explains how to create a tornado chart using the Column chart in WinUI charts.
A tornado chart is a specialized type of bar chart where the bars extend from a defined baseline. It is commonly used to compare data among different types or categories and to depict the impact of various conditions on outcomes. The bars in a tornado chart are horizontal and specifically show impacts clearly and concisely.
Steps to Create a Tornado Chart:
Step 1: Create a ColumnSeries with binding for ItemsSource, XBindingPath, and YBindingPath properties.
Step 2: Set the SfCartesianChart properties IsTranposed and EnableSideBySideSeriesPlacement to True and False respectively. This ensures columns are displayed as horizontal bars and prevents segments from being arranged side by side.
Step 3: To display the model data values within the bar segments, set the ColumnSeries property ShowDataLabels to True. Customize the data label using the CartesianDataLabelSettings class's ContentTemplate property as shown in the example below.
[XAML]
<chart:SfCartesianChart IsTransposed="True" EnableSideBySideSeriesPlacement="False">
<chart:SfCartesianChart.Resources>
<ResourceDictionary>
<viewModel:ValueConverter x:Key="ValueConverter"/>
<DataTemplate x:Key="dataLabelTemplate">
<Grid>
<TextBlock Text="{Binding Converter={StaticResource ValueConverter}}" FontSize="12"/>
</Grid>
</DataTemplate>
</ResourceDictionary>
</chart:SfCartesianChart.Resources>
...
<chart:SfCartesianChart.Series>
<chart:ColumnSeries XBindingPath="Year" YBindingPath="Export"
ItemsSource="{Binding Data}"
ShowDataLabels="True" Label="Export">
<chart:ColumnSeries.DataLabelSettings>
<chart:CartesianDataLabelSettings Position="Outer"
ContentTemplate="{StaticResource dataLabelTemplate}"/>
</chart:ColumnSeries.DataLabelSettings>
</chart:ColumnSeries>
<chart:ColumnSeries XBindingPath="Year" YBindingPath="Import"
ItemsSource="{Binding Data}"
ShowDataLabels="True" Label="Import">
<chart:ColumnSeries.DataLabelSettings>
<chart:CartesianDataLabelSettings Position="Outer"
ContentTemplate="{StaticResource dataLabelTemplate}"/>
</chart:ColumnSeries.DataLabelSettings>
</chart:ColumnSeries>
</chart:SfCartesianChart.Series>
</chart:SfCartesianChart>
Step 4: Use an IValueConverter to transform negative values into absolute values, as shown in the example below.
[C#]
public class ValueConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
//Change the negative values into absolute value.
return Math.Abs(System.Convert.ToDouble(value));
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
return value;
}
}
Step 5: Customize the axis labels using the LabelTemplate property of the axis, along with a converter to display absolute values, as shown below.
[XAML]
<chart:SfCartesianChart.YAxes>
<chart:NumericalAxis>
<chart:NumericalAxis.LabelTemplate>
<DataTemplate>
<TextBlock Text="{Binding Content, Converter={StaticResource ValueConverter}}"/>
</DataTemplate>
</chart:NumericalAxis.LabelTemplate>
</chart:NumericalAxis>
</chart:SfCartesianChart.YAxes>
Output
See also
How to create a Column Chart in WinUI?
For a detailed view, explore the sample on GitHub.
Conclusion
I hope you enjoyed learning about how to create a WinUI Tornado Chart (SfCartesianChart).
You can refer to our WinUI Chart’s feature tour page to know about its other groundbreaking feature representations. You can also explore our WinUI Chart documentation to understand how to present and manipulate data.
For current customers, you can check out our WinUI 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 WinUI Chart and other WinUI components.
If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
