Chart of the Week: Creating A Trend Line Using WPF Charts to Visualize Rapid Heating in North American Oceans
Tags: wpf, chart, ui, datavisualization
Published: 2023-09-20 06:22:30

---
title: Chart of the Week: Creating A Trend Line Using WPF Charts to Visualize Rapid Heating in North American Oceans
published: true
date: 2023-09-15 10:57:55 UTC
tags: wpf, chart, ui, datavisualization
canonical_url: https://www.syncfusion.com/blogs/post/trend-line-wpf-chart-visualize-heating-north-american-oceans.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a1lcmltk4bd0pycj08k9.png
---
Welcome to the **Chart of the Week** blog series!

Today, we will create a trend line to visualize the temperature increase in North American oceans using [Syncfusion WPF Charts](https://www.syncfusion.com/wpf-controls/charts "Syncfusion WPF Charts").

In 2022, the North American ocean temperature increased by 0.04 degrees Celsius compared to the previous year.

In this example, the trend line is drawn for the temperature data points on the chart. The resulting line is used to analyze whether the ocean temperature has generally cooled or heated up over previous decades and will be used to predict changes in the next decade. This prediction will aid in forecasting cyclone patterns.

The following image shows the charted data and its trend line.

![Visualizing the Rise in Temperature of North American Oceans using WPF Charts](https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Visualizing-the-Rise-in-Temperature-of-North-American-Oceans-using-WPF-Charts-3.png)

Let’s see how to re-create this chart with a column chart using the Syncfusion [WPF Charts](https://www.syncfusion.com/wpf-controls/charts "WPF Charts") control.

## Step 1: Collecting data for ocean water temperature

First, we need to collect data on [ocean water temperature in North America](https://www.ncei.noaa.gov/access/monitoring/climate-at-a-glance/global/time-series/globe/ocean/12/12/1880-2022/data.csv?trend=true&trend_base=10&begtrendyear=1880&endtrendyear=2022 "Increase in North American ocean water temperature data"). For our demonstration, the data is acquired from the NOAA, and each data point contains two values: the year of the measurement and the temperature anomaly measurement in degrees Celsius. The data is provided in CSV format.

## Step 2: Prepare the data for the trend line

Let’s define the **YearlyTemperatureAnomaly** class with **Temperature** and **Year** properties to store the yearly temperature anomalies.

Refer to the following code example.

```csharp
public class YearlyTemperatureAnomaly
{
   public DateTime Year { get; set; }
   public double Temperature { get; set; }

   public YearlyTemperatureAnomaly(DateTime year,double temperature) 
   {
      Year = year;
      Temperature = temperature;
   }
}
```

Next, generate a data collection in the **GlobalTemperatureAnomalies** class using the **CollectionOfTemperature** property. Convert the CSV data to a collection of data points using the **ReadCSV** method and store it in the **CollectionOfTemperature** property.

Refer to the following code example.

```csharp
public class GlobalTemperatureAnomalies
{
    private ObservableCollection<YearlyTemperatureAnomaly> collection;
    public ObservableCollection<YearlyTemperatureAnomaly> CollectionOfTemperature
    { 
       set { collection = value; }
       get { return collection; }
    }

    public Geometry PathData
    {
       set { path = value; }
       get { return path; }
    }

    public GlobalTemperatureAnomalies()
    {
        CollectionOfTemperature = new ObservableCollection<YearlyTemperatureAnomaly>(ReadCSV("F:\\WPF\\Blog\\WaterWarming_HurricaneSeason\\WaterWarming_HurricaneSeason\\TemperatureAnomalies"));
    }

    public IEnumerable<YearlyTemperatureAnomaly> ReadCSV(string fileName)
    {
        List<string> lines = File.ReadAllLines(System.IO.Path.ChangeExtension(fileName, ".csv")).ToList();

        return lines.Select(line =>
        {
           string[] data = line.Split(',');
               
           DateTime date = DateTime.ParseExact(data[0], "yyyy", CultureInfo.InvariantCulture);
           return new YearlyTemperatureAnomaly(date, Convert.ToDouble(data[1]));
        });
    }
}
```

## Step 3: Configure the WPF Charts

Now, configure the Syncfusion WPF Charts control using this [documentation](https://help.syncfusion.com/wpf/charts/getting-started "Getting started with WPF Charts").

```xml
<Chart:SfChart> 
 <Chart:SfChart.PrimaryAxis>
  <Chart:DateTimeAxis>
  </Chart:DateTimeAxis>
 </Chart:SfChart.PrimaryAxis>

 <Chart:SfChart.SecondaryAxis>
  <Chart:NumericalAxis>
  </Chart:NumericalAxis>
 </Chart:SfChart.SecondaryAxis>
</Chart:SfChart>
```

## Step 4: Initialize the chart data context

Then, configure the **GlobalTemperatureAnomalies** class to bind its properties to the WPF Charts **DataContext**.

```xml
<Chart:SfChart.DataContext>
 <local:GlobalTemperatureAnomalies/>
</Chart:SfChart.DataContext>
```

## Step 5: Initialize the column series and trend line

To visualize the increase in ocean water temperature, we’ll use the Syncfusion WPF [ColumnSeries](https://help.syncfusion.com/wpf/charts/seriestypes/columnandbar "Column Chart in WPF") instance.

```xml
<Chart:SfChart.Series>
 <chart:ColumnSeries XBindingPath="Year" YBindingPath="Temperature" ItemsSource="{Binding CollectionOfTemperature}">
 </Chart:ColumnSeries>
</Chart:SfChart.Series>
```

In the previous code example, we’ve bound the **ItemsSource** property with the temperature collection to view the data points in the column chart. We also bound the **Year** and **Temperature** properties to the [XBindingPath](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_XBindingPath "XBindingPath property of WPF Charts") and [YBindingPath](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.XyDataSeries.html#Syncfusion_UI_Xaml_Charts_XyDataSeries_YBindingPath "YBindingPath property of WPF Charts"), respectively.

Now, configure the [trend line](https://help.syncfusion.com/wpf/charts/trendlines "Trendlines in WPF Charts") on the column series to analyze and display the trend of the data graphically.

```xml
<Chart:SfChart.Series>
 <Chart:ColumnSeries XBindingPath="Year" YBindingPath="Temperature" ItemsSource="{Binding CollectionOfTemperature}">
  <Chart:ColumnSeries.Trendlines>
   <Chart:Trendline />
  </Chart:ColumnSeries.Trendlines>
 </Chart:ColumnSeries>
</Chart:SfChart.Series>
```

## Step 6: Customize the trend line

We can customize the [trend line](https://help.syncfusion.com/wpf/charts/trendlines "Trendlines in WPF Charts") using the [Type](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.TrendlineBase.html#Syncfusion_UI_Xaml_Charts_TrendlineBase_Type "Type property of WPF Charts"), [Foreground](https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.control.foreground?view=windowsdesktop-7.0 "Foreground property of .NET MAUI Framework"), [Stroke](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.TrendlineBase.html#Syncfusion_UI_Xaml_Charts_TrendlineBase_Stroke "Stroke property of WPF Charts"), and [StrokeThickness](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.TrendlineBase.html#Syncfusion_UI_Xaml_Charts_TrendlineBase_StrokeThickness "StrokeThickness property of WPF Charts") properties. We can also display the future and past trends using the [Forecasting](https://help.syncfusion.com/wpf/charts/trendlines#forecasting "Forecasting in WPF Charts") methods.

```xml
<Chart:ColumnSeries.Trendlines>
 <chart:Trendline Stroke="Black" StrokeThickness="2" Foreground="Black" Type="Linear"/>
</Chart:ColumnSeries.Trendlines>
```

## Step 7: Customize the series points

We can customize the column chart appearance using the [CustomTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ColumnSeries.html#Syncfusion_UI_Xaml_Charts_ColumnSeries_CustomTemplate "CustomTemplate property of WPF Charts") property. In this example, we’ve used the [TrackBallLabelTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_TrackBallLabelTemplate "TrackBallLabelTemplate property of WPF Charts") property to display the **YBindingPath** value when hovering over the data points.

```xml
<chart:ColumnSeries TrackBallLabelTemplate="{StaticResource trackBallLabelTemplate}" 
                    CustomTemplate="{StaticResource seriesTemplate}" 
                    XBindingPath="Year" YBindingPath="Temperature"
                    ItemsSource="{Binding CollectionOfTemperature}">
</Chart:ColumnSeries>
```

## Step 8: Customize the header of the chart

Use the [Header](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartBase.html#Syncfusion_UI_Xaml_Charts_ChartBase_Header "Header property of WPF Charts") property to customize the title of the chart and align it using the [HorizontalHeaderAlignment](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartBase.html#Syncfusion_UI_Xaml_Charts_ChartBase_HorizontalHeaderAlignment "HorizontalHeaderAlignment property of WPF Charts") and [VerticalHeaderAlignment](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartBase.html#Syncfusion_UI_Xaml_Charts_ChartBase_VerticalHeaderAlignment "VerticalHeaderAlignment property of WPF Charts") properties.

Refer to the following code example.

```xml
<Chart:SfChart.Header>
 <Grid Width="1000" HorizontalAlignment="Left" Margin="5,0,0,10" VerticalAlignment="Center">
  <Grid.ColumnDefinitions>
   <ColumnDefinition Width= "80"/>
   <ColumnDefinition Width="*"/>
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
   <RowDefinition/>
   <RowDefinition/>
  </Grid.RowDefinitions>
   <StackPanel Orientation= "Vertical" Background="Transparent" Margin="10">
    <Path Margin="0,0,0,0" Grid.RowSpan= "2" 
          Data="{Binding PathData}" Stretch="Uniform"
          Fill="Orange" Width="60" 
          Height="60" RenderTransformOrigin="0.5,0.5">
    </Path>
   </StackPanel>
   <StackPanel Margin="5,0,0,0"
               HorizontalAlignment="Left"  
               Orientation="Vertical" Grid.Column="1">
     <TextBlock  
              Text="Creating a Trend Line to Chart the Rapid" 
              HorizontalAlignment="Left" TextWrapping="Wrap"
              FontSize="35" FontWeight="SemiBold" Foreground="Black"/>
     <TextBlock 
              Text= "Heating of North American Oceans" 
              HorizontalAlignment="Left" FontWeight="SemiBold"
              FontSize="35" Foreground="Black"/>
                       
   </StackPanel>
   <StackPanel Margin="0,0,-350,0" Grid.Row= "1"
                Grid.Column="1" HorizontalAlignment="Right">
    <Canvas>
     <Path Stroke="Black" StrokeThickness="1.5">
      <Path.Data>
       <PathGeometry>
        <PathGeometry.Figures>
         <PathFigureCollection>
          <PathFigure StartPoint="20,15">
           <PathFigure.Segments>
            <PathSegmentCollection>
             <LineSegment Point= "40,15"/>
            </PathSegmentCollection>
           </PathFigure.Segments>
          </PathFigure>
         </PathFigureCollection>
        </PathGeometry.Figures>
       </PathGeometry>
      </Path.Data>
     </Path>
    </Canvas>
    <TextBlock Text="1880-2022 trend" 
          TextAlignment="Left" Margin="0,0,-100,0" Width="500" 
          VerticalAlignment= "Bottom"
          FontSize="20" Foreground="Gray"/>
    <TextBlock 
          Text= "ocean temperature anomalies" TextAlignment= "Left"        
          VerticalAlignment="Bottom" FontSize="20" 
          Width="500" Foreground="Gray"/>
   </StackPanel>
 </Grid>
</Chart:SfChart.Header>
```

## Step 9: Customize the chart axis elements

Let’s customize the [ChartAxis](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html# "ChartAxis class of WPF Charts") based on our requirements. We’ll use the [DateTimeAxis](https://help.syncfusion.com/wpf/charts/axis#datetimeaxis "DateTimeAxis property of WPF Charts") property to visualize the yearly data points.

Enable the [ShowTrackBallInfo](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_ShowTrackBallInfo "ShowTrackBallInfo property of WPF Charts") property to view the year data in the DateTimeAxis and customize the trackball label using [TrackBallLabelTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_TrackBallLabelTemplate "TrackBallLabelTemplate property of WPF Charts").

Configure the [IntervalType](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeAxis_IntervalType "IntervalType property of WPF Charts") and [Interval](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeAxis_Interval "Interval property of WPF Charts") value and format the date time label using the [LabelFormat](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_LabelFormat "LabelFormat property of WPF Charts") property.

```xml
<Chart:SfChart.PrimaryAxis>
 <Chart:DateTimeAxis 
           TrackBallLabelTemplate="{StaticResource xAxisTrackBallLabelTemplate}"
           ShowTrackBallInfo="True" IntervalType="Years" Interval="5"  
           EdgeLabelsDrawingMode="Shift" LabelFormat="yyyy">
 </Chart:DateTimeAxis>
</Chart:SfChart.PrimaryAxis>
< Chart:SfChart.SecondaryAxis>
 <chart:NumericalAxis ShowTrackBallInfo="True" Minimum="-0.7"
                       LabelFormat="0.##&#186;C" Name="yaxis">
 </Chart:NumericalAxis>
</Chart:SfChart.SecondaryAxis>
```

After that, configure the [LabelStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_LabelStyle "LabelStyle property of WPF Charts") of the axis labels using the **FontSize** and **FontWidth** properties.

```xml
<Chart:SfChart.PrimaryAxis>
 <Chart:DateTimeAxis > 
  <Chart:DateTimeAxis.LabelStyle>
   <chart:LabelStyle FontSize="12" />
  </Chart:DateTimeAxis.LabelStyle>
 </Chart:DateTimeAxis>
</Chart:SfChart.PrimaryAxis>

<Chart:SfChart.SecondaryAxis>
 <Chart:NumericalAxis>
  <Chart:NumericalAxis.LabelStyle>
   <chart:LabelStyle FontSize="12" />
  </Chart:NumericalAxis.LabelStyle>
 </Chart:NumericalAxis>
</Chart:SfChart.SecondaryAxis>
```

## Step 10: Configure the trackball behavior

The [ChartTrackBallBehavior](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartTrackBallBehavior.html "ChartTrackBallBehavior class of WPF Charts") class allows users to track the data points when the cursor position changes. It helps users visualize each data point’s corresponding x- and y-values. We can also customize the trackball style using the [ChartTrackBallStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartTrackBallBehavior.html#Syncfusion_UI_Xaml_Charts_ChartTrackBallBehavior_ChartTrackBallStyle "ChartTrackBallStyle property of WPF Charts") property.

Refer to the following code example.

```xml
<Chart:SfChart.Behaviors>
 <chart:ChartTrackBallBehavior ChartTrackBallStyle="{StaticResource trackballStyle}" ShowLine= "True" />
</Chart:SfChart.Behaviors>
```

After executing the previous code examples, we’ll get the output shown in the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Visualizing-the-Rise-in-Temperature-of-North-American-Oceans-using-WPF-Charts-3.png" alt="Visualizing the Rise in Temperature of North American Oceans using WPF Charts" style="width:100%">

  <figcaption>Visualizing the Rise in Temperature of North American Oceans using WPF Charts</figcaption>

</figure>

## GitHub reference

For more details, refer to the [GitHub demo](https://github.com/SyncfusionExamples/creating-a-Trend-Line-to-a-Chart-for-the-Rapid-Heating-of-North-American-Waters "Creating a trend line to chart the rapid heating of North American oceans GitHub demo").

## Conclusion

Thanks for reading! In this blog, we’ve seen how to visualize the temperature increase in North American oceans using the Syncfusion [WPF Charts](https://www.syncfusion.com/wpf-controls/charts "WPF Charts") control.

You can explore our [WPF Charts examples](https://github.com/syncfusion/wpf-demos/tree/master/chart "WPF Charts GitHub demos") to learn more about the supported chart types and how easy it is to configure them for stunning visual effects.

The latest version of the WPF Charts control is available for current customers from the [License and Downloads](https://www.syncfusion.com/account/downloads "Essential Studio License and Downloads page") page. If you are not yet a Syncfusion customer, try our [30-day free trial](https://www.syncfusion.com/downloads "Free evaluation of the Essential Studio products") to check it out.

Also, you can contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/wpf "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Chart of the Week: Creating a WPF Multiple Fast Line Chart to Display COVID-19’s Impact On U.S. Unemployment](https://www.syncfusion.com/blogs/post/wpf-multi-fast-line-chart-covid-19-unemployment.aspx "Blog: Chart of the Week: Creating a WPF Multiple Fast Line Chart to Display COVID-19’s Impact On U.S. Unemployment")
- [Chart of the Week: Creating a WPF Range Column Chart to Visualize ChatGPT’s Performance in Competitive Exams](https://www.syncfusion.com/blogs/post/wpf-range-column-chart-visualize-chatgpt-performance.aspx "Blog: Chart of the Week: Creating a WPF Range Column Chart to Visualize ChatGPT’s Performance in Competitive Exams")
- [Chart of the Week: Visualize the Transfer Spending and Earning Among Football League Clubs Using WPF Scatter Chart](https://www.syncfusion.com/blogs/post/visualize-transfer-spending-earning-wpf-scatter-chart.aspx "Blog: Chart of the Week: Visualize the Transfer Spending and Earning Among Football League Clubs Using WPF Scatter Chart")
- [Visualize JSON Data Quickly Using WPF Charts](https://www.syncfusion.com/blogs/post/visualize-json-data-wpf-charts.aspx "Blog: Visualize JSON Data Quickly Using WPF Charts")