Skip to main content

How to: Custom Draw Chart Series Points

  • 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

<Window x:Class="CustomDrawChart.MainWindow"
        Title="MainWindow" Height="350" Width="525" >
            <ColumnDefinition Width="100"/>
            <ColumnDefinition />
        <StackPanel Grid.Row="0" Grid.Column="0">
            <dxe:CheckEdit Name="chbCustomDraw" Content="Custom Draw" IsChecked="True" 
                           Checked="chbCustomDraw_Checked" Unchecked="chbCustomDraw_Unchecked" />
        <dxc:ChartControl Grid.Row="0" Grid.Column="1" Name="chart" 
                    <dxc:AxisY2D GridSpacing="1">
                            <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:AxisRange MinValue="0" MaxValue="3"  />
                <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" />