ChartControl Class

The chart control for WPF applications.

Assembly : DevExpress.Xpf.Charts.v25.2.dll

NuGet Package : DevExpress.Wpf.Charts

Declaration

C#
VB.NET

csharp

[DXLicenseWpf]
public class ChartControl :
    ChartControlBase,
    IContainerElement,
    IChartElement,
    IOwnedElement,
    INotificationOwner,
    IContainerAnimationOptions,
    IEventArgsConverterSource,
    IXtraSupportDeserializeCollection,
    IChartBindingProvider,
    IBindingProvider,
    IVisualChildOwner,
    ISeriesObjectSelector,
    IChartWithData,
    IContainerEventsOptions,
    IContainerToolTipOptions,
    IContainerDataOptions,
    IContainerAnnotationsOptions,
    IContainerChartOptions,
    ISupportNavigationControl,
    ISelectionSupportControl,
    IDeserializableElement

<DXLicenseWpf>
Public Class ChartControl
    Inherits ChartControlBase
    Implements IContainerElement,
               IChartElement,
               IOwnedElement,
               INotificationOwner,
               IContainerAnimationOptions,
               IEventArgsConverterSource,
               IXtraSupportDeserializeCollection,
               IChartBindingProvider,
               IBindingProvider,
               IVisualChildOwner,
               ISeriesObjectSelector,
               IChartWithData,
               IContainerEventsOptions,
               IContainerToolTipOptions,
               IContainerDataOptions,
               IContainerAnnotationsOptions,
               IContainerChartOptions,
               ISupportNavigationControl,
               ISelectionSupportControl,
               IDeserializableElement

The following members return ChartControl objects:

Remarks

The ChartControl class represents a visual control intended for graphical data representation.

A chart control is comprised of separate elements, such as diagram, series, axes, legend, etc. To learn more about them, refer to Chart Elements.

If separate series have compatible types (that is they evoke the same diagram type), they can be combined in the same diagram (and the chart control, as well). So, because the 2D and 3D series types have different associated diagram types, they cannot be displayed simultaneously. For details on this, refer to Series Type Compatibility.

The ChartControl class can display data from different kinds of data sources, which can be any object implementing either the IEnumerable, IList, IListSource or IBindingList interfaces. Such a data source should be assigned to the Series.DataSource property of a chart’s series. Then, it’s required to specify which data fields should be used as points arguments (Series.ArgumentDataMember) and which - as point values (Series.ValueDataMember).

For more information on this, please refer to the Providing Data section.

Example

This example shows how to create a 2D Side-by-Side Bar chart.

Create a ChartControl and set its ChartControl.Diagram property to a XYDiagram2D object. 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.
Specify the Diagram.SeriesItemsSource property to bind a collection of objects used to generate series.
Use the following API members to configure the x-axis options.
Create a legend and customize its settings. For more information about legends, refer to the following topic: Legends

View Example: Chart for WPF - Create a 2D Side-by-Side Bar Chart

XAML

xaml

<Window x:Class="SideBySideBar2DChart.Window1" 
        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"
        xmlns:local="clr-namespace:SideBySideBar2DChart"
        Title="Window1" Height="350" Width="620">
    <Window.DataContext>
        <local:ChartViewModel/>
    </Window.DataContext>
    <Grid>
        <dxc:ChartControl Name="chartControl1">
            <dxc:ChartControl.Diagram>
                <dxc:XYDiagram2D SeriesItemsSource="{Binding Data}">
                    <dxc:XYDiagram2D.SeriesItemTemplate>
                        <DataTemplate>
                            <dxc:BarSideBySideSeries2D DisplayName="{Binding Name}" 
                                               DataSource="{Binding Values}"
                                               ArgumentDataMember="Argument"
                                               ValueDataMember="Value" 
                                               BarWidth="0.6">
                                <dxc:BarSideBySideSeries2D.Model>
                                    <dxc:BorderlessSimpleBar2DModel/>
                                </dxc:BarSideBySideSeries2D.Model>
                            </dxc:BarSideBySideSeries2D>
                        </DataTemplate>
                    </dxc:XYDiagram2D.SeriesItemTemplate>
                    <dxc:XYDiagram2D.AxisX>
                        <dxc:AxisX2D>
                            <dxc:AxisX2D.DateTimeScaleOptions>
                                <dxc:ManualDateTimeScaleOptions MeasureUnit="Year" GridAlignment="Year" 
                                                                AutoGrid="False" GridSpacing="1"/>
                            </dxc:AxisX2D.DateTimeScaleOptions>
                        </dxc:AxisX2D>
                    </dxc:XYDiagram2D.AxisX>
                </dxc:XYDiagram2D>
            </dxc:ChartControl.Diagram>
            <dxc:ChartControl.Legends>
                <dxc:Legend HorizontalPosition="Right"/>
            </dxc:ChartControl.Legends>
        </dxc:ChartControl>
    </Grid>
</Window>

C#
VB.NET

csharp

using System;
using System.Collections.ObjectModel;
using System.Windows;
namespace SideBySideBar2DChart {
    public partial class Window1 : Window {
        public Window1() {
            InitializeComponent();
        }
    }
    public class ChartViewModel {
        public ObservableCollection<DataSeries> Data { get; private set; }

        public ChartViewModel() {
            Data = new ObservableCollection<DataSeries> {
                new DataSeries{
                    Name = "DevAV North",
                    Values = new ObservableCollection<DataPoint> {
                        new DataPoint (new DateTime(2013,12,31), 362.5),
                        new DataPoint (new DateTime(2014,12,31), 348.4),
                        new DataPoint (new DateTime(2015,12,31), 279.0),
                        new DataPoint (new DateTime(2016,12,31), 230.9),
                        new DataPoint (new DateTime(2017,12,31), 203.5),
                        new DataPoint (new DateTime(2018,12,31), 197.1)
                    }
                },
                new DataSeries{
                    Name = "DevAV South",
                    Values = new ObservableCollection<DataPoint> {
                        new DataPoint (new DateTime(2013,12,31), 277.0),
                        new DataPoint (new DateTime(2014,12,31), 328.5),
                        new DataPoint (new DateTime(2015,12,31), 297.0),
                        new DataPoint (new DateTime(2016,12,31), 255.3),
                        new DataPoint (new DateTime(2017,12,31), 173.5),
                        new DataPoint (new DateTime(2018,12,31), 131.8)
                    }
                }
            };
        }
        public class DataSeries {
            public string Name { get; set; }
            public ObservableCollection<DataPoint> Values { get; set; }
        }
        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

Namespace SideBySideBar2DChart
    Public Partial Class Window1
        Inherits Window

        Public Sub New()
            InitializeComponent()
        End Sub
    End Class

    Public Class ChartViewModel
        Private _Data As System.Collections.ObjectModel.ObservableCollection(Of SideBySideBar2DChart.ChartViewModel.DataSeries)

        Public Property Data As ObservableCollection(Of DataSeries)
            Get
                Return _Data
            End Get
            Private Set(ByVal value As ObservableCollection(Of DataSeries))
                _Data = value
            End Set
        End Property

        Public Sub New()
            Data = New ObservableCollection(Of DataSeries) From {
                New DataSeries With {
                    .Name = "DevAV North",
                    .Values = New ObservableCollection(Of DataPoint) From {
                        New DataPoint(New DateTime(2013, 12, 31), 362.5),
                        New DataPoint(New DateTime(2014, 12, 31), 348.4),
                        New DataPoint(New DateTime(2015, 12, 31), 279.0),
                        New DataPoint(New DateTime(2016, 12, 31), 230.9),
                        New DataPoint(New DateTime(2017, 12, 31), 203.5),
                        New DataPoint(New DateTime(2018, 12, 31), 197.1)
                    }
                },
                New DataSeries With {
                    .Name = "DevAV South",
                    .Values = New ObservableCollection(Of DataPoint) From {
                        New DataPoint(New DateTime(2013, 12, 31), 277.0),
                        New DataPoint(New DateTime(2014, 12, 31), 328.5),
                        New DataPoint(New DateTime(2015, 12, 31), 297.0),
                        New DataPoint(New DateTime(2016, 12, 31), 255.3),
                        New DataPoint(New DateTime(2017, 12, 31), 173.5),
                        New DataPoint(New DateTime(2018, 12, 31), 131.8)
                    }
                }
            }
        End Sub

        Public Class DataSeries
            Public Property Name As String
            Public Property Values As ObservableCollection(Of DataPoint)
        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 Class
End Namespace

The following code snippets (auto-collected from DevExpress Examples) contain references to the ChartControl class.

Note

The algorithm used to collect these code examples remains a work in progress. Accordingly, the links and snippets below may produce inaccurate results. If you encounter an issue with code examples below, please use the feedback form on this page to report the issue.

XAML

dashboard-constant-lines/CS/ConstantLineExtension.WPF/ConstantLineModuleStyle.xaml#L11

xml

<DataTemplate x:Key="chartTemplate">
    <dxc:ChartControl Style="{Binding Path=(dxdash:DashboardLayoutItem.ViewStyle), RelativeSource={RelativeSource TemplatedParent}}" x:Name="chart">
        <dxc:XYDiagram2D>

wpf-charts-add-custom-legend-item-to-legend/CS/CustomLegendItemSample/MainWindow.xaml#L18

xml

<Grid>
    <dxc:ChartControl HorizontalAlignment="Left" VerticalAlignment="Top">
        <dxc:ChartControl.Palette>

wpf-bind-a-range-control-to-a-chart-control/CS/GoldPrices/MainWindow.xaml#L22

xml

</Grid.RowDefinitions>
<dxc:ChartControl x:Name="chart"
                  BorderThickness="0"

wpf-charts-custom-draw-crosshair-cursor/CS/CrosshairCustomDraw/MainWindow.xaml#L8

xml

<StackPanel>
    <dxc:ChartControl Name="chartControl1" Height="340"
                      CustomDrawCrosshair="chartControl1_CustomDrawCrosshair">

wpf-charts-custom-draw-chart-series-points/CS/CustomDrawChart/MainWindow.xaml#L16

xml

</StackPanel>
<dxc:ChartControl Grid.Row="0" Grid.Column="1" Name="chart"
                  CustomDrawSeriesPoint="chart_CustomDrawSeriesPoint">

Implements

IDockTarget

IPrintableControl

Inheritance

Object DispatcherObject DependencyObject Visual UIElement FrameworkElement Control ChartControlBase ChartControl

ChartControl Class

ChartControl Class

Declaration

Related API Members

Remarks

Example

Related GitHub Examples

Implements

Inheritance