You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+7-7Lines changed: 7 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,19 +1,19 @@
1
1
# How to create a Tornado Chart in WinUI
2
2
3
-
This article explains how to create a tornado chart using the Column chart in WinUI charts.
3
+
This article explains how to create a tornado chart using the [Column chart](https://help.syncfusion.com/winui/cartesian-charts/column) in [WinUI charts](https://www.syncfusion.com/winui-controls/charts).
4
4
5
5
The tornado chart is a special type of bar chart, where the bars extended from the defined baseline, which is also used to compare the data among different types of data or categories. The bars in the tornado chart are horizontal; this chart is basically used to show the impact, such as how a condition will impact the outcome.
6
6
7
-
You can achieve the tornado chart using column charts by following the steps below:
7
+
You can achieve the tornado chart using [column charts](https://help.syncfusion.com/winui/cartesian-charts/column) by following the steps below:
8
8
9
9
### Step 1:
10
-
Create ColumnSeries with binding of ItemsSource, XBindingPath, and YBindingPath properties.
10
+
Create [ColumnSeries](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ColumnSeries.html) with binding of [ItemsSource](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_ItemsSource), [XBindingPath](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_XBindingPath), and [YBindingPath](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.XyDataSeries.html?tabs=tabid-1#Syncfusion_UI_Xaml_Charts_XyDataSeries_YBindingPath) properties.
11
11
12
12
### Step 2:
13
-
Set the SfCartesianChartIsTranposed and EnableSideBySideSeriesPlacement property value as false to create columns as horizontal bar and to avoid segments arranged side by side.
13
+
Set the [SfCartesianChart](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfCartesianChart.html)[IsTranposed](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfCartesianChart.html#Syncfusion_UI_Xaml_Charts_SfCartesianChart_IsTransposed) and [EnableSideBySideSeriesPlacement](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfCartesianChart.html#Syncfusion_UI_Xaml_Charts_SfCartesianChart_EnableSideBySideSeriesPlacement) property value as false to create columns as horizontal bar and to avoid segments arranged side by side.
14
14
15
15
### Step 3:
16
-
Display the model data values in the bar segment by setting the ColumnSeriesShowDataLabels property value as true and customize the data label by using the CartesianDataLabelSettings class ContentTemplate property as demonstrated in the code example below.
16
+
Display the model data values in the bar segment by setting the [ColumnSeries](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ColumnSeries.html)[ShowDataLabels](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.DataMarkerSeries.html#Syncfusion_UI_Xaml_Charts_DataMarkerSeries_ShowDataLabels) property value as `true` and customize the data label by using the [CartesianDataLabelSettings](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.CartesianDataLabelSettings.html) class [ContentTemplate](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_ChartDataLabelSettings_ContentTemplate) property as demonstrated in the code example below.
17
17
18
18
**[XAML]**
19
19
```
@@ -49,7 +49,7 @@ Display the model data values in the bar segment by setting the ColumnSeries Sho
49
49
```
50
50
51
51
### Step 4:
52
-
Using IValueConverter, we can customize the negative values into absolute values as per the code example below.
52
+
Using `IValueConverter`, we can customize the negative values into absolute values as per the code example below.
53
53
54
54
**[C#]**
55
55
```
@@ -69,7 +69,7 @@ public class ValueConverter : IValueConverter
69
69
```
70
70
71
71
### Step 5:
72
-
Similarly, we can customize the axis label using the LabelTemplate property of the axis and by using a converter to display absolute values as per the below code example.
72
+
Similarly, we can customize the axis label using the [LabelTemplate](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_LabelTemplate) property of the axis and by using a converter to display absolute values as per the below code example.
0 commit comments