---
title: "Create a WPF Multi-Bar Chart to Visualize U.S. vs. China Superpower Status"
published_at: "2024-10-16T11:34:08+00:00"
modified_at: "2026-01-19T09:51:12+00:00"
url: "https://www.syncfusion.com/blogs/post/wpf-multi-barchart-for-us-china-superpower-status"
excerpt: "Let's compare and visualize the superpower status of the U.S. and China using the Syncfusion WPF Multi-Bar Chart."
taxonomy_category:
  - "Chart"
  - "Chart of the week"
  - "Desktop"
  - "Development"
  - "Syncfusion"
  - "WPF"
taxonomy_post_tag:
  - "Chart"
  - "Customization"
  - "Data Visualization"
  - "desktop"
  - "development"
  - "WPF"
---

[Chart of the week](https://www.syncfusion.com/blogs/category/chart-of-the-week)
# Create a WPF Multi-Bar Chart to Visualize U.S. vs. China Superpower Status

[Saiyath Ali Fathima M](https://www.syncfusion.com/blogs/author/saiyathalifathimabee-moidhinabdhulkathar)

![Create a WPF Multi-Bar Chart to Visualize U.S. vs. China Superpower Status](https://www.syncfusion.com/blogs/wp-content/uploads/2024/10/Create-a-WPF-Multi-Bar-Chart-to-Visualize-U.S.-vs.-China-Superpower-Status-3.png)


**TL;DR:** Let’s create a WPF Multi-Bar Chart to visualize and compare the U.S. and China’s superpower status across eight key measures of national strength, including trade, innovation, military, and economic output. The blog provides a detailed, step-by-step approach to setting up data models, binding them to the chart, and customizing the chart’s appearance to clearly present each country’s influence and global power.

Welcome to the **Chart of the Week** blog series!

Today, we’ll explore how to compare the U.S. and China’s superpower status using the Syncfusion [WPF Multiple Bar Chart](https://www.syncfusion.com/wpf-controls/charts/wpf-bar-chart)
 with [annotation](https://help.syncfusion.com/wpf/charts/annotations)
.

Today, the global balance of power is shaped by numerous factors, including economic strength, trade, and a country’s defense-industrial base. This chart will visualize a comparison between the U.S. and China across eight measures of power.

[Annotations](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart.html#Syncfusion_UI_Xaml_Charts_SfChart_Annotations)
 in [SfChart](https://help.syncfusion.com/wpf/charts/getting-started)
 are a powerful feature that allows you to highlight specific areas or points of interest within the chart. They can be used to draw attention to important data points, trends, or thresholds, making the chart more informative and easier to interpret. Annotations can include lines, text, shapes, and more, and they can be customized in terms of position, style, and appearance to suit your specific needs.

## **Methodology for evaluating nations’ strength**

In this analysis, [Ray Dalio](https://economicprinciples.org/downloads/DalioRay_Power_Index_Appendix.pdf)
 delineates eight fundamental pillars that assess various dimensions of a nation’s strength. These categories include:

1. Trade
2. Innovation and technology
3. Education
4. Economic output
5. Military
6. Financial center
7. Competitiveness
8. Reserve currency status

The scores for these categories were calculated using Z-scores, which indicate how far a specific data point deviates from the dataset’s average, measured in terms of standard deviation. The interpretation of Z-scores is as follows:

- A **Z-score** of ** 0** indicates that the data point is at the average.
- A **Z-score** of ** 1** indicates that the data point is one standard deviation above the average.

The following image demonstrates the chart that we intend to construct.![Visualizing U.S. vs China Superpower Status using WPF Multiple Bar Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2024/10/Visualizing-U.S.-vs-China-Superpower-Status-using-WPF-Multiple-Bar-Chart.png)

Let’s explore the steps involved in analyzing the details of the **World’s #1 Superpower** using the [Syncfusion WPF Charts](https://www.syncfusion.com/wpf-controls/charts)
.

## Step 1: Collecting data

To begin, we should gather the data for the chart. Here, we’ll refer to [The Great Powers Index 2024](https://economicprinciples.org/downloads/DalioRay_Power_Index_Appendix.pdf)
, which provides comprehensive information on comparing the U.S. and China across eight measures of power. Specifically, we examined page 6.

## Step 2: Preparing the data for the chart

Start by creating the **MeasureModel** and ** AnnotationModel** classes to represent the methodologies for China and the United States and their measurements.

```
public class MeasureModel
{
    public string Measures { get; set; }
    public double US { get; set; }
    public double China { get; set; }
    public AnnotationModel AnnotationValue { get; set; }

    public MeasureModel(string measures, double us, double china, AnnotationModel annotationValue)
    {
        Measures = measures;
        US = us;
        China = china;
        AnnotationValue = annotationValue;
        AnnotationValue.Text = measures;
    }
}

public class AnnotationModel
{
    public double X1 { get; set; }
    public double X2 { get; set; }
    public double Y1 { get; set; }
    public double Y2 { get; set; }
    public string? Text { get; set; }    
    public double TextX { get; set; }
    public double TextY { get; set; }
}
```

Next, create a data collection to represent the details of measured data using the **MeasureData** class with the ** Data** property.

Refer to the following code example.

```
public class MeasureData
{
    public ObservableCollection<MeasureModel> Data { get; set; }

    public MeasureData()
    {
        Data = new ObservableCollection<MeasureModel>()
        {
            new MeasureModel("Reserve Currency Status", 1.9, -0.6, new AnnotationModel()
            {
                X1 = 0.1, Y1 = 0, X2 = 0.1, Y2 = 2.4, TextX = 0.3, TextY = 2.4
            }),
            new MeasureModel("Financial Center", 2.7, 0.2, new AnnotationModel()
            {
                X1 = 1.0, Y1 = 0, X2 = 1.1, Y2 = 2.6, TextX = 1.3, TextY = 2.6
            }),
            new MeasureModel("Economic Output", 1.7, 1.6, new AnnotationModel()
            {
                X1 = 2.0, Y1 = 0, X2 = 2.0, Y2 = 2.3, TextX = 2.2, TextY = 2.3
            }),
            new MeasureModel("Trade", 1.3, 1.7, new AnnotationModel()
            {
                X1 = 3.0, Y1 = 0, X2 = 3.0, Y2 = -0.5, TextX = 3.2, TextY = -0.63
            }),
            new MeasureModel("Military", 2.1, 0.9, new AnnotationModel()
            {
                X1 = 4.0, Y1 = 0, X2 = 4.0, Y2 = -0.7, TextX = 4.2, TextY = -0.89
            }),
            new MeasureModel("Competitiveness", -0.4, 1.0, new AnnotationModel()
            {
                X1 = 5.0, Y1 = 0, X2 = 5.0, Y2 = 2.3, TextX = 5.2, TextY = 2.3
            }),
            new MeasureModel("Innovation and Technology", 1.9, 1.8, new AnnotationModel()
            {
                X1 = 6.0, Y1 = 0, X2 = 6.0, Y2 = -0.3, TextX = 6.2, TextY = -0.9
            }),
            new MeasureModel("Education", 2.0, 1.6, new AnnotationModel()
            {
                X1 = 7.0, Y1 = 0, X2 = 7.0, Y2 = -0.3, TextX = 7.2, TextY = -0.54
            }),
        };
    }
}
```

## Step 3: Configuring the Syncfusion WPF Charts control

Let’s configure the Syncfusion WPF Charts control using this [getting started documentation](https://help.syncfusion.com/wpf/charts/getting-started)
.

Refer to the following code example.

```
<charts:SfChart>

 <charts:SfChart.PrimaryAxis>
  <charts:CategoryAxis/>
 </charts:SfChart.PrimaryAxis>

 <charts:SfChart.SecondaryAxis>
  <charts:NumericalAxis/>
 </chart:SfChart.SecondaryAxis>

</charts:SfChart>
```

## Step 4: Binding data to the WPF Bar Chart

Now, we will create a multiple [bar graph](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.BarSeries.html)
 to compare the United States and China across eight measures of power. The following code example illustrates how to bind the collected data to the Bar Chart.

```
<charts:BarSeries ItemsSource="{Binding Data}" XBindingPath="Measures" YBindingPath="US">
</charts:BarSeries>

<charts:BarSeries ItemsSource="{Binding Data}" XBindingPath="Measures" YBindingPath="China" >
</charts:BarSeries>
```

## Step 5: Customizing the WPF Bar Chart appearance

Let’s enhance the appearance of the [WPF Bar Chart](https://help.syncfusion.com/wpf/charts/seriestypes/columnandbar#bar-chart)
 by customizing its elements, such as the title, axis, legend, series color, and data labels.

### Customizing the chart title

Adding a title can help make the data presented in the chart more easily understood. Refer to the following code example to customize the chart title.

```
<charts:SfChart.Header>

 <TextBlock TextAlignment="Center" Text="U.S. vs. China: Who Holds the Title of World’s #1 Superpower?"  FontSize="20" Margin="0,0,0,20" Foreground="White" FontWeight="DemiBold"/>

</charts:SfChart.Header>
```

### Customizing the axis

To customize the chart axis, we’ll use the following properties:

- **[ShowGridLines](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_ShowGridLines) :** To customize the visibility of the major grid lines.
- **[AxisLineStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_AxisLineStyle) :** To customize the style of the axis line.
- **[MajorGridLineStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_MajorGridLineStyle) :** To customize the style of the major grid lines.
- [ShowAxisNextToOrigin](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_ShowAxisNextToOrigin) : To position the axis line at the origin value specified in the [Origin](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_Origin) property based on the x or y axes.

Refer to the following code example.

```
<charts:SfChart.PrimaryAxis>
 <charts:CategoryAxis FontSize="0.1" Origin="0" ShowAxisNextToOrigin="True"
           TickLineSize="0" ShowGridLines="False">
 
  <charts:CategoryAxis.AxisLineStyle>
   <Style TargetType="Line">
    <Setter Property="StrokeThickness" Value="2"/>
    <Setter Property="Stroke" Value="White"/>
   </Style>
  </charts:CategoryAxis.AxisLineStyle>
        
 </charts:CategoryAxis>
</charts:SfChart.PrimaryAxis>
 
<charts:SfChart.SecondaryAxis>
 <charts:NumericalAxis FontSize="14" Interval="0.5" Minimum="-1" TickLineSize="0"
                Foreground="White" EdgeLabelsDrawingMode="Shift">
 
  <charts:NumericalAxis.AxisLineStyle>
   <Style TargetType="Line">
    <Setter Property="StrokeThickness" Value="0"/>
   </Style>
  </charts:NumericalAxis.AxisLineStyle>
 
  <charts:NumericalAxis.MajorGridLineStyle>
   <Style TargetType="Line">
    <Setter Property="StrokeThickness" Value="0.25"/>
    <Setter Property="Stroke" Value="White"/>
   </Style>
  </charts:NumericalAxis.MajorGridLineStyle>
 
 </charts:NumericalAxis>
</charts:SfChart.SecondaryAxis>
```

### Customizing the series appearance

Let’s customize the series’ color, spacing, and shape using the [Interior](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_Interior)
, [SegmentSpacing](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.BarSeries.html#Syncfusion_UI_Xaml_Charts_BarSeries_SegmentSpacing)
, and [CustomTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.BarSeries.html#Syncfusion_UI_Xaml_Charts_BarSeries_CustomTemplate)
 properties.

```
<charts:SfChart>

 <charts:SfChart.Resources>
                
  <DataTemplate x:Key="seriesTemplate">
   <Canvas>
    <Rectangle Canvas.Left="{Binding RectX}" Canvas.Top="{Binding RectY}"
                     Width="{Binding Width}" Height="{Binding Height}" RadiusX="10" RadiusY="10">
     <Rectangle.Fill>
      <VisualBrush TileMode="Tile" Viewport="0,0,10,10" ViewportUnits="Absolute" 
                                Viewbox="0,0,10,10" ViewboxUnits="Absolute">
                                    
       <VisualBrush.Transform>
        <RotateTransform Angle="45"/>
       </VisualBrush.Transform>
                                    
       <VisualBrush.Visual>
        <Canvas>
         <Rectangle Fill="{Binding Interior}" Width="5" Height="20"/>
         <Rectangle Fill="White" Width="5" Height="20" Canvas.Left="5"/>
        </Canvas>
       </VisualBrush.Visual>
      </VisualBrush>
     </Rectangle.Fill>
    </Rectangle>
   </Canvas>
  </DataTemplate>
                
 </charts:SfChart.Resources>

 <charts:BarSeries Label="US : 0.89" ItemsSource="{Binding Data}" XBindingPath="Measures" YBindingPath="US" CustomTemplate="{StaticResource seriesTemplate}" SegmentSpacing="0.2" Interior="#0003CE">
 </charts:BarSeries>

 <charts:BarSeries Label="China : 0.8" ItemsSource="{Binding Data}" XBindingPath="Measures" YBindingPath="China" CustomTemplate="{StaticResource seriesTemplate}" SegmentSpacing="0.2" Interior="#EE3D43">
 </charts:BarSeries>

</charts:SfChart>
```

### Adding chart legend

Refer to the following code to enable and customize the [WPF Charts legend](https://help.syncfusion.com/wpf/charts/legend)
.

```
<charts:SfChart.Legend>
 <charts:ChartLegend DockPosition="Right" LegendPosition="Inside" Foreground="White" 
                        FontSize="13" IconHeight="13" IconWidth="13">

  <charts:ChartLegend.Header>
   <TextBlock Text="Overall Strength Score" FontWeight="SemiBold" FontSize="15" Margin="-30,0,0,0"/>
  </charts:ChartLegend.Header>

 </charts:ChartLegend>
</charts:SfChart.Legend>

<charts:BarSeries Label="US : 0.89">
</charts:BarSeries>

<charts:BarSeries Label="China : 0.8">
</charts:BarSeries>
```

### Customizing the data label appearance

We can enable and customize the chart data label elements, such as the label position, text color, and background, as follows.

```
<charts:BarSeries.AdornmentsInfo>
 <charts:ChartAdornmentInfo ShowLabel="True" LabelPosition="Outer" FontSize="14" UseSeriesPalette="False" Foreground="White"/>
</charts:BarSeries.AdornmentsInfo>
```

### Incorporating annotations

The [SfChart](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart.html)
 supports annotations, allowing you to mark specific areas of interest in the chart. You can add shapes, text, and images using these [annotations](https://help.syncfusion.com/wpf/charts/annotations)
.

In this section, we will incorporate line and text annotations to compare the United States and China’s superpower status.

To incorporate annotations, we can set the annotation collection in the view model as follows to minimize the code.

**C#**

```
public class MeasureData
{
    public AnnotationCollection Annotation { get; set; }

    public MeasureData()
    {
        Annotation = new AnnotationCollection();

        foreach (var measure in Data)
        {
            Annotation.Add(new LineAnnotation()
            {
                X1 = measure.AnnotationValue.X1,
                Y1 = measure.AnnotationValue.Y1,
                X2 = measure.AnnotationValue.X2,
                Y2 = measure.AnnotationValue.Y2,
                StrokeThickness = 1.5,
                Stroke = new SolidColorBrush(Colors.White),
                StrokeDashArray = new DoubleCollection() { 2, 3 },
            });

            Annotation.Add(new TextAnnotation()
            {
                Text = measure.AnnotationValue.Text,
                X1 = measure.AnnotationValue.TextX,
                Y1 = measure.AnnotationValue.TextY,
                Foreground = new SolidColorBrush(Colors.White),
                FontStyle = FontStyles.Italic,
                FontSize = 14.5
            });
        }
    }
}
```

**XAML**

```
<charts:SfChart Annotations="{Binding Annotation}">

</charts:SfChart>
```

After executing the previous code examples, the output will look like the following image.

![Visualizing the U.S. vs. China superpower status using the WPF Multi-Bar Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2024/10/Visualizing-U.S.-vs-China-Superpower-Status-using-WPF-Bar-Chart.png)

Visualizing the U.S. vs. China superpower status using the WPF Multi-Bar Chart

## GitHub reference

For more details, refer to the project on [GitHub](https://github.com/SyncfusionExamples/Creating-a-WPF-Multiple-Bar-Chart-Visualizing-U.S.-vs.-China-Superpower-Status)
.

## Conclusion

Thank you for reading! In this blog, we’ve explored how to compare and visualize the U.S. and China’s superpower status using the Syncfusion [WPF Multi-Bar Chart](https://www.syncfusion.com/wpf-controls/charts/wpf-bar-chart)
. We strongly encourage you to follow the steps outlined in this blog and share your feedback in the comments section below.

Existing customers can download the new version of Essential Studio® on the [License and Downloads](https://www.syncfusion.com/account)
 page. If you are not a Syncfusion customer, try our 30-day [free trial](https://www.syncfusion.com/downloads)
 to check out our incredible features.

If you require any assistance, please don’t hesitate to contact us via our [support forum](https://www.syncfusion.com/forums)
, [support portal](https://support.syncfusion.com/)
, or [feedback portal](https://www.syncfusion.com/feedback)
. We are always eager to help you!

## Related blogs

- 
  - [Create a WPF FastLine Chart to Analyze Global Population Trends by Age Group](https://www.syncfusion.com/blogs/post/wpf-fastline-chart-for-population)
  - [Clean and Preprocess E-Commerce Website Traffic Data Using an AI-Powered Smart WPF Chart](https://www.syncfusion.com/blogs/post/preprocess-data-with-smart-wpf-chart)
  - [Everything You Need to Know About WPF Gantt Control](https://www.syncfusion.com/blogs/post/everything-about-wpf-gantt-control)
  - [Creating a WPF Chart Dashboard to Analyze 2024 T20 World Cup Statistics](https://www.syncfusion.com/blogs/post/wpf-charts-2024-t20-world-cup-data)