How to: Create a 2D Spline Chart

Jul 17, 2019
4 minutes to read

This example demonstrates how to create a 2D Spline chart.

Create a ChartControl and specify its ChartControl.Diagram property to a SimpleDiagram2D object.
Add a SplineSeries2D object to the Diagram.Series collection.
To enable series markers, use the LineSeries2D.MarkerVisible property. The LineSeries2D.MarkerSize property allows you to set the marker size.
Assign a SeriesLabel object to the Series.Label property. Use the following properties to customize series label options:
Use the properties below to customize axes:

MainWindow.xaml
Window1.xaml.cs
Window1.xaml.vb

xaml

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts"
        x:Class="SplineChart.MainWindow"
        xmlns:local="clr-namespace:SplineChart"
        Title="Spline Chart" Height="440" Width="660">
    <Window.DataContext>
        <local:ChartViewModel/>
    </Window.DataContext>
    <Grid>
        <dxc:ChartControl>
            <dxc:XYDiagram2D>
                <dxc:SplineSeries2D DataSource="{Binding Data}" 
                                    ArgumentDataMember="Argument"
                                    ValueDataMember="Value"
                                    LineTension="0.8" 
                                    MarkerSize="15"
                                    MarkerVisible="True">
                    <dxc:SplineSeries2D.Label>
                        <dxc:SeriesLabel dxc:MarkerSeries2D.Angle="90" 
                                         ConnectorVisible="False"
                                         Indent="15"
                                         ResolveOverlappingMode="Default"                                                   
                                         Visible="True"/>
                    </dxc:SplineSeries2D.Label>
                </dxc:SplineSeries2D>
                <dxc:XYDiagram2D.AxisX>
                    <dxc:AxisX2D GridLinesVisible="True"/>
                </dxc:XYDiagram2D.AxisX>
                <dxc:XYDiagram2D.AxisY>
                    <dxc:AxisY2D>
                        <dxc:AxisY2D.Title>
                            <dxc:AxisTitle Content="Cents per Gallon"/>
                        </dxc:AxisY2D.Title>
                        <dxc:AxisY2D.WholeRange>
                            <dxc:Range dxc:AxisY2D.AlwaysShowZeroLevel="False"/>
                        </dxc:AxisY2D.WholeRange>
                    </dxc:AxisY2D>
                </dxc:XYDiagram2D.AxisY>
            </dxc:XYDiagram2D>
            <dxc:ChartControl.Titles>
                <dxc:Title Dock="Top" 
                           HorizontalAlignment="Center" 
                           Content="U.S. Fuel Oil Prices"/>
            </dxc:ChartControl.Titles>
        </dxc:ChartControl>
    </Grid>
</Window>

using System;
using System.Collections.ObjectModel;
using System.Windows;

namespace SplineChart {
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
        }
    }
    public class ChartViewModel {
        public ObservableCollection<DataPoint> Data { get; private set; }
        public ChartViewModel() {
            int lastYear = DateTime.Now.Year - 1;
            Data = new ObservableCollection<DataPoint> {
                        new DataPoint (new DateTime(lastYear,1,1), 138.7),
                        new DataPoint (new DateTime(lastYear,2,1), 141.4),
                        new DataPoint (new DateTime(lastYear,3,1), 159.5),
                        new DataPoint (new DateTime(lastYear,4,1), 160.7),
                        new DataPoint (new DateTime(lastYear,5,1), 148.8),
                        new DataPoint (new DateTime(lastYear,6,1), 166.6)
                };
        }
    }
    public class DataPoint {
        public DateTime Argument { get; set; }
        public double Value { get; set; }
        public DataPoint(DateTime argument, double value) {
            Argument = argument;
            Value = value;
        }
    }
}

Imports System
Imports System.Collections.ObjectModel
Imports System.Windows

Namespace SplineChart
    ''' <summary>
    ''' Interaction logic for MainWindow.xaml
    ''' </summary>
    Partial Public Class MainWindow
        Inherits Window

        Public Sub New()
            InitializeComponent()
        End Sub
    End Class
    Public Class ChartViewModel
        Private privateData As ObservableCollection(Of DataPoint)
        Public Property Data() As ObservableCollection(Of DataPoint)
            Get
                Return privateData
            End Get
            Private Set(ByVal value As ObservableCollection(Of DataPoint))
                privateData = value
            End Set
        End Property
        Public Sub New()
            Dim lastYear As Integer = Date.Now.Year - 1
            Data = New ObservableCollection(Of DataPoint) From {
                New DataPoint(New Date(lastYear,1,1), 138.7),
                New DataPoint(New Date(lastYear,2,1), 141.4),
                New DataPoint(New Date(lastYear,3,1), 159.5),
                New DataPoint(New Date(lastYear,4,1), 160.7),
                New DataPoint(New Date(lastYear,5,1), 148.8),
                New DataPoint(New Date(lastYear,6,1), 166.6)
            }
        End Sub
    End Class
    Public Class DataPoint
        Public Property Argument() As Date
        Public Property Value() As Double
        Public Sub New(ByVal argument As Date, ByVal value As Double)
            Me.Argument = argument
            Me.Value = value
        End Sub
    End Class
End Namespace