We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to create the Tornado Chart in WPF Charts?

Platform: WPF |
Control: SfChart

This article describes how to create a Tornado Chart using the Bar and RangeColumn 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 Bar chart

 

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

Tornado chart using RangeColumn chart

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

 

2X faster development

The ultimate WPF UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile