---
title: "Chart of the Week: Creating a WPF 3D Column Chart to Visualize the Panama Canal’s Shipment Transit Data"
published_at: "2024-04-03T15:04:16+00:00"
modified_at: "2026-01-19T09:39:01+00:00"
url: "https://www.syncfusion.com/blogs/post/wpf-3d-column-chart-transit-data"
excerpt: "In this blog, we will visualize the data on Panama Canal shipment transits in 2022 and 2023 using the Syncfusion WPF 3D Column Chart control."
taxonomy_category:
  - "Chart"
  - "Chart of the week"
  - "Desktop"
  - "Development"
  - "Syncfusion"
  - "UI"
  - "WPF"
taxonomy_post_tag:
  - "Charts"
  - "Data Visualization"
  - "desktop"
  - "Syncfusion"
  - "WPF"
---

[Chart of the week](https://www.syncfusion.com/blogs/category/chart-of-the-week)
# Chart of the Week: Creating a WPF 3D Column Chart to Visualize the Panama Canal’s Shipment Transit Data

[Surya Karan Raja](https://www.syncfusion.com/blogs/author/surya-karan-raja)

![Creating a WPF 3D Column Chart to Visualize the Panama Canal’s Shipment Transit Data](https://www.syncfusion.com/blogs/wp-content/uploads/2024/04/Creating-a-WPF-3D-Column-Chart-to-Visualize-the-Panama-Canals-Shipment-Transit-Data.png)


**TLDR:** Gathering and visualizing the data on Panama Canal shipment traffic using the Syncfusion WPF 3D Column Chart, customizing the chart’s title, axis, position, data labels, and other elements for enhanced insights.

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

Today, we will visually compare the number of Panama Canal transits in 2022 and 2023 using the [Syncfusion WPF 3D Chart control](https://www.syncfusion.com/wpf-controls/charts/wpf-3d-column-chart)
.

The [Panama Canal](https://en.wikipedia.org/wiki/Panama_Canal)
, a crucial waterway that connects the Atlantic and Pacific Oceans, acts as a vital route for global trade. It facilitates the passage of ships carrying various goods and commodities. Understanding the traffic flow through the Panama Canal is crucial for stakeholders in the shipping industry, policymakers, and economists. It helps them monitor trends, plan logistics, and make informed decisions.

We’ll dive into leveraging the [Syncfusion WPF 3D Column Chart](https://help.syncfusion.com/wpf/sfchart3d/3dseries#column-charts)
 control capabilities to illustrate and analyze the trends in Panama Canal transits effectively.

Refer to the following image.

![Visualizing the Panama Canals shipment transit data using the Syncfusion WPF 3D Column Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2024/04/Visualizing-the-Panama-Canals-shipment-transit-data-using-the-Syncfusion-WPF-3D-Column-Chart.png)

## Step 1: Gathering the transit data

Before creating the chart, we need to gather data from the [Panama Canal Authority’s](https://pancanal.com/wp-content/uploads/2023/11/09-Panama-Canal-Traffic-by-Market-Segment.pdf)
 report. This is a crucial step, laying the foundation for the subsequent analysis and visualization of the data using the Syncfusion WPF 3D Charts control.

## Step 2: Populate data for the chart

Let’s define a data model to organize our data efficiently.

Create a **TransitModel** class to represent each data point and a ** ViewModel** class to handle the entire dataset.

Refer to the following code example.

```
public class TransitModel
{
    public string? Category { get; set; }
    public double NumberOfCrossing2022 {  get; set; }
    public double NumberOfCrossing2023 { get; set; }

    public TransitModel(string category, double numberOfCrossing2023,
double numberOfCrossing2022)
    {
        Category = category;
        NumberOfCrossing2023 = numberOfCrossing2023;
        NumberOfCrossing2022 = numberOfCrossing2022;
    }
}
```

The **ViewModel** class uses an ** ObservableCollection** of ** TransitModel** instance to store yearly transit data.

Refer to the following code example.

```
public class ViewModel
{
    public ObservableCollection<TransitModel> TransitData {  get; set; }

    public ViewModel() 
    {
        TransitData = new ObservableCollection<TransitModel>();
        TransitData.Add(new TransitModel("Dry Bulk", 2649, 2910));
        TransitData.Add(new TransitModel("Container", 2787, 2822));
        TransitData.Add(new TransitModel("Chemical Tankers", 2196, 2332));
        TransitData.Add(new TransitModel("LPG", 1757, 1501));
        TransitData.Add(new TransitModel("Vehicle Carriers", 813, 746));
        TransitData.Add(new TransitModel("General Cargo", 519, 645));
        TransitData.Add(new TransitModel("Crude Tankers", 499, 607));
        TransitData.Add(new TransitModel("Refrigerated", 546, 604));
        TransitData.Add(new TransitModel("LNG", 326 ,374));
        TransitData.Add(new TransitModel("Passengers", 240, 127));
        TransitData.Add(new TransitModel("Others", 306, 335));
    }
}
```

These classes facilitate the organization and management of transit data.

## Step 3: Configuring Syncfusion WPF 3D Chart

Let’s configure the Syncfusion WPF 3D Chart control using this [documentation](https://help.syncfusion.com/wpf/sfchart3d/gettingstarted)
.

Refer to the following code example.

```
<chart:SfChart3D>
 <chart:SfChart3D.PrimaryAxis>
  <chart:CategoryAxis3D>
 </chart:CategoryAxis3D>
</chart:SfChart3D.PrimaryAxis>

<chart:SfChart3D.SecondaryAxis>
 <chart:NumericalAxis3D>
  </chart:NumericalAxis3D>
 </chart:SfChart3D.SecondaryAxis>
</chart:SfChart3D>
```

## Step 4: Binding data to the WPF 3D Column Chart

Let’s bind the Panama Canal’s yearly transit data using the [Syncfusion WPF ColumnSeries3D](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ColumnSeries3D.html)
 instance.

In this example, we’ll generate two instances of ColumnSeries3D to depict the data for the years 2022 and 2023.

```
<chart:ColumnSeries3D ItemsSource="{Binding TransitData}"
                      XBindingPath="Category"
                      YBindingPath="NumberOfCrossing2022">
</chart:ColumnSeries3D>

<chart:ColumnSeries3D ItemsSource="{Binding TransitData}"
                      XBindingPath="Category"
                      YBindingPath="NumberOfCrossing2023">
</chart:ColumnSeries3D>
```

In the previous code example, we’ve bound the **TransitData** property to the ** ItemsSource** property. The ** XBindingPath** and ** YBindingPath** properties are bound to the ** Category**, ** NumberOfCrossing2022**, and ** NumberOfCrossing2023** properties, respectively.

## Step 5: Customizing the chart’s appearance

To further refine the visual aesthetics of our chart, we can enhance the chart elements, such as including a chart title, positioning the chart, enabling a legend, and customizing various aspects like series, axis, and chart elements.

### Chart positioning

Let’s customize the 3D Column Chart’s appearance using the following properties:

- **Depth:** To control the depth of field in the 3D view of the chart. It determines the distance over which objects in the chart are rendered with clarity and sharpness, influencing the perception of depth in the visualization.
- **EnableRotation:** To turn on or off the ability to rotate the 3D chart interactively. When enabled, users can manipulate the chart’s rotation using input devices such as a mouse or touch screen.
- **PerspectiveAngle:** To control the perspective view of the chart. The perspective angle determines how much this effect needs to be applied to the chart.
- **Rotation:** To control the rotation angle of the 3D chart. It allows users to adjust the chart’s orientation along the specified axis, providing a different data visualization perspective.

Refer to the following code example.

```
<chart:SfChart3D Margin="-25,0,5,5" 
                 Depth="200" 
                 EnableRotation="True"
                 PerspectiveAngle="50"
                 Rotation="29"
                 SideBySideSeriesPlacement="True" 
                 Background="Transparent">
</chart:SfChart3D>
```

### Chart title customization

Adding a title to the chart can help users understand the data being visualized. Here’s how we can customize the chart title.

Refer to the following code example.

```
<chart:SfChart3D.Header>
 <Grid Margin="-100,0,0,3" x:Name="header" Grid.Column="0" HorizontalAlignment="Left">
  <Grid.ColumnDefinitions>
   <ColumnDefinition Width="70"/>
   <ColumnDefinition Width="*"/>
  </Grid.ColumnDefinitions>

  <ContentPresenter  Grid.Column="0">
   <ContentPresenter.Content>
    <Image Source="Resources\ship.png"></Image>
   </ContentPresenter.Content>
  </ContentPresenter>

  <Grid Grid.Column="1" >
   <Grid.RowDefinitions>
    <RowDefinition></RowDefinition>
    <RowDefinition></RowDefinition>
   </Grid.RowDefinitions>
   <StackPanel Grid.Row="0" Margin="5,0,0,0" HorizontalAlignment="Left" Orientation="Vertical">
    <Label Content="The Panama Canal Traffic by Shipment Category in 2022-2023" FontSize="18" FontFamily="AntaRegular" FontWeight="Bold"/>
    <Label Content="The quantity of shipments passing through the Panama Canal varies across different categories of transit." FontSize="14" Margin="0,2,0,0" FontFamily="AntaRegular"/>
   </StackPanel>

   <StackPanel Grid.Row="1"  Orientation="Horizontal" Margin="10,5,0,5">
    <Rectangle Height="12" Width="30" RadiusX="5" RadiusY="5" Fill="#96D759" />
    <TextBlock Text="2022" FontSize="15" Margin="7,0,0,0" />
    <Rectangle Height="12" Width="30" RadiusX="5" RadiusY="5" Fill="#775DD0" Margin="7,0,0,0" />
    <TextBlock Text="2023" Margin="7,0,0,0" FontSize="15"/>
   </StackPanel>
  </Grid>
 </Grid>
</chart:SfChart3D.Header>
```

### Chart axis customization

Here, we will enhance the appearance of the chart axis by employing the following properties:

- **ShowGridLines:** To customize the visibility of the major grid lines.
- **LabelStyle:** To adjust the style of the axis labels.
- **TickLineSize:** To adjust the size of the axis tick lines.

Refer to the following code example.

```
<chart:SfChart3D.PrimaryAxis>
 <chart:CategoryAxis3D TickLineSize="0" ShowGridLines="False">
  <chart:CategoryAxis3D.LabelStyle>
   <chart:LabelStyle FontSize="12.8"/>
  </chart:CategoryAxis3D.LabelStyle>
 </chart:CategoryAxis3D>
</chart:SfChart3D.PrimaryAxis>

<chart:SfChart3D.SecondaryAxis >
 <chart:NumericalAxis3D TickLineSize="0" Interval="500" Maximum="3500">
  <chart:NumericalAxis3D.LabelStyle>
   <chart:LabelStyle FontSize="12.9"/>
  </chart:NumericalAxis3D.LabelStyle>
 </chart:NumericalAxis3D>
</chart:SfChart3D.SecondaryAxis>
```

### Customizing the 3D Column series appearance

Elevate the series’ visual appeal by assigning distinct interior colors to each series and configuring segment spacing for better visualization.

```
<chart:ColumnSeries3D Interior="#96D759"
                       SegmentSpacing="0.3">
</chart:ColumnSeries3D>

<chart:ColumnSeries3D Interior="#775DD0"
                       SegmentSpacing="0.3" >
</chart:ColumnSeries3D>
```

## Step 6: Adding data labels to the chart

We can customize the chart segments’ data label using the [ChartAdornmentsInfo3D](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfo3D.html)
 property of the ColumnSeries3D class.

```
<chart:ColumnSeries3D>
 <chart:ColumnSeries3D.AdornmentsInfo>
  <chart:ChartAdornmentInfo3D ShowLabel="True" FontSize="7" Margin="0,0.1,0,0" LabelPosition="Inner"/>
 </chart:ColumnSeries3D>
```

By implementing these customizations, we can transform the 3D column chart into a visually striking representation of Panama Canal traffic, enriched with insightful details and clarity.

After executing the previous code examples, we’ll get an output like the one in the following image.

![Visualizing the Panama Canals shipment transit data using the Syncfusion WPF 3D Column Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2024/04/Visualizing-the-Panama-Canals-shipment-transit-data-using-the-Syncfusion-WPF-3D-Column-Chart.png)

Visualizing the Panama Canals shipment transit data using the Syncfusion WPF 3D Column Chart

## GitHub reference

For more details, refer to the project on [GitHub](https://github.com/SyncfusionExamples/Creating-a-3D-WPF-Column-Chart-to-Visualize-the-Panama-Canal-Traffic-by-Shipment-Category/tree/master)
.

## Conclusion

Thanks for reading! In this blog, we’ve visualized and compared the Panama Canal shipment transit data for 2022 and 2023 using the Syncfusion [WPF 3D Column Chart.](https://www.syncfusion.com/wpf-controls/charts/wpf-3d-column-chart)
 Please follow the steps outlined in this blog and share your feedback in the comments section below.

The 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 need assistance, please do not hesitate to contact us through 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 ready and willing to help you!

## Related blog

- [Chart of the Week: Creating a WPF Chart Dashboard to Visualize the 2023 World Billionaires List](https://www.syncfusion.com/blogs/post/wpf-chart-world-billionaires)
- [Harmonizing Powerhouses: Syncfusion WPF Controls Are Now Compatible with Avalonia XPF](https://www.syncfusion.com/blogs/post/wpf-ui-compatible-avalonia-xpf)
- [Streamline Your WPF Development with Syncfusion: Introducing the WPF Template Studio for Visual Studio](https://www.syncfusion.com/blogs/post/wpf-template-studio-visual-studio)
- [Visualize JSON Data Quickly Using WPF Charts](https://www.syncfusion.com/blogs/post/visualize-json-data-wpf-charts)