Creating a Tornado Chart in .NET MAUI SfCartesianChart: Step-by-Step Guide

This article explains how to create a tornado chart using the column chart in .NET MAUI.

A ‘tornado chart’ is a specific type of bar chart that includes two horizontal bars extending from a defined midpoint, used to compare data among different categories or types.

Model
To construct a tornado chart, you need the original values in their negative form. The sine of the original value is changed and stored in another property.

public class Model
{
    public DateTime Date { get; set; }
    public double DieselPrice { get; set; }
    public double PetrolPrice { get; set; }
    public double NegativePetrolPrice { get; set; }

    public Model(DateTime date, double petrolPrice, double dieselPrice)
    {
        Date = date;
        PetrolPrice =  petrolPrice;
        NegativePetrolPrice = - petrolPrice;
        DieselPrice = dieselPrice;
    }

}

ViewModel

public class ViewModel
{
    public ObservableCollection<model> FuelsPriceDetails { get; set; }

    public ViewModel()
    {

        FuelsPriceDetails = new ObservableCollection<model>()
        {
            new Model (new DateTime(2014,01,01), 127.50, 133.46),
            new Model (new DateTime(2015,01,01), 111.13, 114.90),
            new Model (new DateTime(2016,01,01), 108.85, 110.13),
            new Model (new DateTime(2017,01,01), 117.59, 120.15),
            new Model (new DateTime(2018,01,01), 125.20, 129.98),
            new Model (new DateTime(2019,01,01), 124.88, 131.48),
            new Model (new DateTime(2020,01,01), 113.95, 119.14),
            new Model (new DateTime(2021,01,01), 131.27, 134.94),
            new Model (new DateTime(2022,01,01), 164.73, 177.66)
        };
    }
}

Create a column chart using the Cartesian Chart documentation. Set IsTransposed to true and EnableSideBySidePlacement to false to create a horizontal bar chart and avoid having segments arranged side by side.

XAML

<chart:SfCartesianChart IsTransposed="True" EnableSideBySideSeriesPlacement="False">
   <chart:ColumnSeries ItemsSource="{Binding FuelsPriceDetails}" XBindingPath="Date" YBindingPath="NegativePetrolPrice"/>
   <chart:ColumnSeries ItemsSource="{Binding FuelsPriceDetails}" XBindingPath="Date" YBindingPath="DieselPrice"/>
</chart:SfCartesianChart>

C#

SfCartesianChart chart = new SfCartesianChart();
chart.IsTransposed = true;
chart.EnableSideBySideSeriesPlacement = false;

ColumnSeries series1 = new ColumnSeries()
{
    ItemsSource = (new ViewModel()).FuelsPriceDetails,
    XBindingPath = "Date",
    YBindingPath = "NegativePetrolPrice",
};

ColumnSeries series2 = new ColumnSeries()
{
    ItemsSource = (new ViewModel()).FuelsPriceDetails,
    XBindingPath = "Date",
    YBindingPath = "DieselPrice",
};

chart.Series.Add(series1);
chart.Series.Add(series2);

On the left side series, data labels and the y-axis display negative values. To eliminate the negative sign, set the LabelFormat as follows:

DataLabel:

XAML

<chart:ColumnSeries>
   <chart:ColumnSeries.DataLabelSettings>
       <chart:CartesianDataLabelSettings>
           <chart:CartesianDataLabelSettings.LabelStyle>
               <chart:ChartDataLabelStyle LabelFormat="0;#.##"/>
           </chart:CartesianDataLabelSettings.LabelStyle>
       </chart:CartesianDataLabelSettings>
   </chart:ColumnSeries.DataLabelSettings>
</chart:ColumnSeries>

C#

ColumnSeries series1 = new ColumnSeries()
{
    …
};

series1.DataLabelSettings = new CartesianDataLabelSettings();
series1.DataLabelSettings.LabelStyle = new ChartDataLabelStyle
{
    LabelFormat = "0;#.##"
};

Axis Label:

XAML

<chart:SfCartesianChart.YAxes>
   <chart:NumericalAxis>
       <chart:NumericalAxis.LabelStyle>
           <chart:ChartAxisLabelStyle LabelFormat="0;#.##"/>
       </chart:NumericalAxis.LabelStyle>
   </chart:NumericalAxis>
</chart:SfCartesianChart.YAxes>

C#

NumericalAxis secondaryAxis = new NumericalAxis();
secondaryAxis.Title = new ChartAxisTitle();
secondaryAxis.LabelStyle = new ChartAxisLabelStyle()
{
    LabelFormat = "0;#.##"
};

chart.YAxes.Add(secondaryAxis);

Output:

Download the complete sample from GitHub.

Conclusion
I hope you enjoyed learning to create a Tornado Chart in .NET MAUI Cartesian Chart.
You can refer to our .NET MAUI Chart feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI Chart documentation to understand how to present and manipulate data.
For current customers, check out our .NET MAUI from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Chart and other .NET MAUI components.
Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!