How to: Custom Draw Chart Series Points

Jun 07, 2019
3 minutes to read

This example shows how to change the color of each series point according to its values.

In addition, the point labels text is changed to show the color of the current interval (Green, Yellow, or Red).

To accomplish this, it is necessary to invoke the ChartControl.CustomDrawSeriesPoint event and change its drawing options in the CorrectDrawOptions() method.

In this example, you can deactivate the “Custom Draw” option on the stack panel to return to the default appearance of series points.

View Example: Chart for WPF - Create Custom Draw Chart Series Points

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

xaml

<Window x:Class="CustomDrawChart.MainWindow"
        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:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
        Title="MainWindow" Height="350" Width="525" >
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Row="0" Grid.Column="0">
            <dxe:CheckEdit Name="chbCustomDraw" Content="Custom Draw" IsChecked="True" 
                           Checked="chbCustomDraw_Checked" Unchecked="chbCustomDraw_Unchecked" />
        </StackPanel>
        <dxc:ChartControl Grid.Row="0" Grid.Column="1" Name="chart" 
                          CustomDrawSeriesPoint="chart_CustomDrawSeriesPoint">
            <dxc:XYDiagram2D>
                <dxc:XYDiagram2D.AxisY>
                    <dxc:AxisY2D GridSpacing="1">
                        <dxc:AxisY2D.Strips>
                            <dxc:Strip AxisLabelText="High" MinLimit="2" MaxLimit="3"  
                                       Brush="#FFFFDBDB" BorderColor="#00BB002F" />
                            <dxc:Strip AxisLabelText="Middle" MinLimit="1" MaxLimit="2" 
                                       Brush="#FFFFF6BF" BorderColor="#00BB002F" />
                            <dxc:Strip AxisLabelText="Low" MinLimit="0" MaxLimit="1" 
                                       Brush="#FFD6F39F" BorderColor="#00BB002F" />
                        </dxc:AxisY2D.Strips>
                        <dxc:AxisY2D.Range>
                            <dxc:AxisRange MinValue="0" MaxValue="3" />
                        </dxc:AxisY2D.Range>
                    </dxc:AxisY2D>
                </dxc:XYDiagram2D.AxisY>
                <dxc:BarSideBySideSeries2D LabelsVisibility="True">
                    <dxc:SeriesPoint Argument="A" Value="0.3" />
                    <dxc:SeriesPoint Argument="B" Value="1.2" />
                    <dxc:SeriesPoint Argument="C" Value="1.7" />
                    <dxc:SeriesPoint Argument="D" Value="0.8" />
                    <dxc:SeriesPoint Argument="E" Value="1.9" />
                    <dxc:SeriesPoint Argument="F" Value="2.8" />
                    <dxc:SeriesPoint Argument="G" Value="1.3" />
                    <dxc:SeriesPoint Argument="H" Value="3" />
                </dxc:BarSideBySideSeries2D>
            </dxc:XYDiagram2D>
        </dxc:ChartControl>
    </Grid>
</Window>

csharp

using System;
using System.Windows;
using System.Windows.Media;
using DevExpress.Xpf.Charts;

namespace CustomDrawChart
{

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void chbCustomDraw_Checked(object sender, RoutedEventArgs e)
        {
            if (chart != null)
                chart.UpdateData();
        }

        private void chbCustomDraw_Unchecked(object sender, RoutedEventArgs e)
        {
            if (chart != null)
                chart.UpdateData();
        }

        private void chart_CustomDrawSeriesPoint(object sender, CustomDrawSeriesPointEventArgs e)
        {
            if ((bool)chbCustomDraw.IsChecked)
            {
                string color = CorrectDrawOptions(e.SeriesPoint.Value, e.DrawOptions);
                if (!String.IsNullOrEmpty(color))
                    e.LabelText = color + ": " + e.LabelText;
            }
        }

        string CorrectDrawOptions(double val, DrawOptions drawOptions)
        {
            if (drawOptions == null)
                return "";
            if (val < 1)
            {
                drawOptions.Color = Color.FromArgb(0xFF, 0x51, 0x89, 0x03);
                return "Green";
            }
            else if (val < 2)
            {
                drawOptions.Color = Color.FromArgb(0xFF, 0xF9, 0xAA, 0x0F);
                return "Yellow";
            }
            else
            {
                drawOptions.Color = Color.FromArgb(0xFF, 0xC7, 0x39, 0x0C);
                return "Red";
            }
        }
    }
}

Imports Microsoft.VisualBasic
Imports System
Imports System.Windows
Imports System.Windows.Media
Imports DevExpress.Xpf.Charts

Namespace CustomDrawChart

    Partial Public Class MainWindow
        Inherits Window
        Public Sub New()
            InitializeComponent()
        End Sub

        Private Sub chbCustomDraw_Checked(ByVal sender As Object, ByVal e As RoutedEventArgs)
            If chart IsNot Nothing Then
                chart.UpdateData()
            End If
        End Sub

        Private Sub chbCustomDraw_Unchecked(ByVal sender As Object, ByVal e As RoutedEventArgs)
            If chart IsNot Nothing Then
                chart.UpdateData()
            End If
        End Sub

        Private Sub chart_CustomDrawSeriesPoint(ByVal sender As Object, ByVal e As CustomDrawSeriesPointEventArgs)
            If CBool(chbCustomDraw.IsChecked) Then
                Dim color As String = CorrectDrawOptions(e.SeriesPoint.Value, e.DrawOptions)
                If (Not String.IsNullOrEmpty(color)) Then
                    e.LabelText = color & ": " & e.LabelText
                End If
            End If
        End Sub

        Private Function CorrectDrawOptions(ByVal val As Double, ByVal drawOptions As DrawOptions) As String
            If drawOptions Is Nothing Then
                Return ""
            End If
            If val < 1 Then
                drawOptions.Color = Color.FromArgb(&HFF, &H51, &H89, &H03)
                Return "Green"
            ElseIf val < 2 Then
                drawOptions.Color = Color.FromArgb(&HFF, &HF9, &HAA, &H0F)
                Return "Yellow"
            Else
                drawOptions.Color = Color.FromArgb(&HFF, &HC7, &H39, &H0C)
                Return "Red"
            End If
        End Function
    End Class
End Namespace