How to: Create a 2D Spline Chart

• Jul 17, 2019
• 4 minutes to read

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

1. Create a ChartControl and specify its ChartControl.Diagram property to a SimpleDiagram2D object.

   Note

   Note that the ChartControl.Diagram is a content property. You can declare a diagram in XAML directly after a chart control’s declaration without wrapping it in opening and closing ChartControl.Diagram tags.

2. Add a SplineSeries2D object to the Diagram.Series collection.

   Note

   Note that the Diagram.Series is a content property. You can declare series in XAML directly after a diagram’s declaration without wrapping them in opening and closing Diagram.Series tags.

   Use the following properties to bind the series to data:

   • Series.DataSource - Specifies the series’s data source.
   • Series.ArgumentDataMember - Defines the data member that provides the series’s arguments.
   • Series.ValueDataMember - Specifies the data member that provides the series’s values.

3. To enable series markers, use the LineSeries2D.MarkerVisible property. The LineSeries2D.MarkerSize property allows you to set the marker size.

4. Assign a SeriesLabel object to the Series.Label property. Use the following properties to customize series label options:

   • MarkerSeries2D.Angle - Gets or sets the angle which controls the position of series point labels for all 2D series with markers (e.g. Line, Point, etc.).
   • SeriesLabel.ConnectorVisible - Gets or sets the visibility of a connector line from the series point label to the series point marker.
   • SeriesLabel.Indent - Gets or sets the distance between a series point and its series label.
   • SeriesLabel.ResolveOverlappingMode - Gets or sets a value specifying the mode to resolve overlapping of series labels.
   • Series.LabelsVisibility - Specifies whether to show labels for a series.

5. Use the properties below to customize axes:

   • AxisBase.GridLinesVisible - Specifies whether to show axis grid lines.
   • AxisLabel.TextPattern - Gets or sets a format string that specifies the text to be displayed within the axis label.
   • TitleBase.Content - Gets or sets the title’s content. This is a dependency property.
   • AxisY2D.AlwaysShowZeroLevel - Gets or sets a value that specifies whether to show the zero level of the AxisY2D.

View Example

MainWindow.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>

Window1.xaml.cs

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;
        }
    }
}

Window1.xaml.vb

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