DevExpress v24.2 Update — Your Feedback Matters
Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.
Take the survey
Not interested
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).
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 ()
InitializeComponent()
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
using System.Windows ;
using DevExpress.Xpf.Charts ;
using System.Windows.Media ;
namespace NestedDonutChart {
public partial class MainWindow : Window {
public MainWindow ( ) {
InitializeComponent();
}
private void chartControl1_CustomDrawSeriesPoint (object sender, CustomDrawSeriesPointEventArgs e ) {
if (e.SeriesPoint.Value <= 10 ) {
e.DrawOptions.Color = Color.FromArgb(0xFF , 0x51 , 0x89 , 0x03 );
}
else if ((e.SeriesPoint.Value > 10 ) & (e.SeriesPoint.Value <= 20 )) {
e.DrawOptions.Color = Color.FromArgb(0xFF , 0xF9 , 0xAA , 0x0F );
}
else if (e.SeriesPoint.Value > 20 ) {
e.DrawOptions.Color = Color.FromArgb(0xFF , 0xC7 , 0x39 , 0x0C );
}
}
}
}
<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 ="NestedDonutChart.MainWindow"
Title ="MainWindow" Height ="350" Width ="525" >
<Grid >
<dxc:ChartControl Name ="chartControl1" ToolTipEnabled ="True"
CustomDrawSeriesPoint ="chartControl1_CustomDrawSeriesPoint" >
<dxc:ChartControl.Diagram >
<dxc:SimpleDiagram2D >
<dxc:SimpleDiagram2D.Series >
<dxc:NestedDonutSeries2D DisplayName ="Products" InnerIndent ="5"
ToolTipPointPattern ="{} {A}: {VP:##.##%}"
HoleRadiusPercent ="0" LegendTextPattern ="{}{A}" >
<dxc:NestedDonutSeries2D.Points >
<dxc:SeriesPoint Argument ="Fish" Value ="10" />
<dxc:SeriesPoint Argument ="Meat" Value ="20" />
<dxc:SeriesPoint Argument ="Dairy Product" Value ="30" />
</dxc:NestedDonutSeries2D.Points >
</dxc:NestedDonutSeries2D >
<dxc:NestedDonutSeries2D DisplayName ="Kind of Products" ShowInLegend ="False"
ToolTipPointPattern ="{} {A}: {VP:##.##%}" >
<dxc:NestedDonutSeries2D.Points >
<dxc:SeriesPoint Argument ="Carp" Value ="5" />
<dxc:SeriesPoint Argument ="Sauger" Value ="10" />
<dxc:SeriesPoint Argument ="Bluegill" Value ="9" />
<dxc:SeriesPoint Argument ="Beef" Value ="14" />
<dxc:SeriesPoint Argument ="Chicken" Value ="16" />
<dxc:SeriesPoint Argument ="Duck" Value ="18" />
<dxc:SeriesPoint Argument ="Cottage cheese" Value ="22" />
<dxc:SeriesPoint Argument ="Kumis" Value ="24" />
<dxc:SeriesPoint Argument ="Ice Cream" Value ="26" />
</dxc:NestedDonutSeries2D.Points >
</dxc:NestedDonutSeries2D >
</dxc:SimpleDiagram2D.Series >
</dxc:SimpleDiagram2D >
</dxc:ChartControl.Diagram >
<dxc:ChartControl.Legend >
<dxc:Legend />
</dxc:ChartControl.Legend >
<dxc:ChartControl.Titles >
<dxc:Title Dock ="Top" HorizontalAlignment ="Center" Content ="Nested Donut" />
</dxc:ChartControl.Titles >
</dxc:ChartControl >
</Grid >
</Window >