Articles in this section
Category / Section

How to create the Tornado Chart in WPF Charts?

2 mins read

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  ItemSourceXBindingPath, 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  ItemSourceXBindingPath, 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

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 forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment