How to: Create a 2D Nested Donut Chart

  • 2 minutes to read

The following example demonstrates how to create a Nested Donut chart.

To do this, it is necessary to assign the ChartControl.Diagram property to SimpleDiagram2D, and then add two NestedDonutSeries2D objects with points to the diagram’s Diagram.Series collection.

Also, this example shows how to change the color of each series point according to its values using the ChartControl.CustomDrawSeriesPoint event. As a result, segments of an outer donut representing kinds of products are colored with a specific product group color (an inner donut).

View Example

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

Namespace NestedDonutChart

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

        Private Sub chartControl1_CustomDrawSeriesPoint(ByVal sender As Object, ByVal e As CustomDrawSeriesPointEventArgs)

            If e.SeriesPoint.Value <= 10 Then
                e.DrawOptions.Color = Color.FromArgb(&HFF, &H51, &H89, &H03)

            ElseIf (e.SeriesPoint.Value > 10) And (e.SeriesPoint.Value <= 20) Then
                e.DrawOptions.Color = Color.FromArgb(&HFF, &HF9, &HAA, &H0F)

            ElseIf e.SeriesPoint.Value > 20 Then
                e.DrawOptions.Color = Color.FromArgb(&HFF, &HC7, &H39, &H0C)
            End If
        End Sub
    End Class
End Namespace