How to add a view at the center hole of WinForms Donut Charts?

The WinForms Chart Control from Syncfusion® supports Donut chart through the DoughnutCoefficient property of the Pie chart. A Donut (or Doughnut) chart is essentially a pie chart with a “hole” in the center. This article explains how you can add your desired view within that hole.

You can achieve this by hooking into the ChartAreaPaint event of the chart control and adjusting the view's position to align with the chart hole using the Location property.

Place a label at the center of donut chart

Please follow these steps to achieve the desired UI:

Step1: Create a chart control by including necessary packages and populating data to the chart. For more detailed guidance, refer to this link.

Step2: Add the chart type as Pie and configure it as a Donut chart by using the DoughnutCoefficient property.

chartSeries = new ChartSeries();
chartSeries.Type = ChartSeriesType.Pie;
chartSeries.ConfigItems.PieItem.DoughnutCoeficient = 0.8f;

Me.chartSeries = New ChartSeries()
Me.chartSeries.Type = ChartSeriesType.Pie 
Me.chartSeries.ConfigItems.PieItem.DoughnutCoeficient = 0.8F

Step3: Add your desired view to the control. In this example, a Label is added to display the product count in the center of the doughnut chart.

this.chartControl = new ChartControl();
. . .

//Event hook to add the desired view at the center of donut.
chartControl.ChartAreaPaint += ChartControl1_ChartAreaPaint;
 
// Center label
this.centerLabel = new System.Windows.Forms.Label();
this.Controls.Add(this.centerLabel);
this.Controls.Add(this.chartControl);

Me.chartControl = New ChartControl()
. . .

' Event hook to add desired view at the center of donut
AddHandler Me.chartControl.ChartAreaPaint, AddressOf ChartControl1_ChartAreaPaint

' Center label
Me.centerLabel = New System.Windows.Forms.Label()
Me.Controls.Add(Me.centerLabel)
Me.Controls.Add(Me.chartControl)

Step 4: Calculate the label's position by considering its width and height alongside the chart series bounds as shown below.

private void ChartControl1_ChartAreaPaint(object sender, System.Windows.Forms.PaintEventArgs e)
{
    //After the chart is loaded. 
    this.centerLabel.AutoSize = true;
    this.centerLabel.Size = new System.Drawing.Size(10, 13);
    this.centerLabel.Text = "5 \r\nTOTAL \r\nPRODUCTS";
    this.centerLabel.Font = new Font("", 10, FontStyle.Bold);
    this.centerLabel.TextAlign = ContentAlignment.MiddleCenter;
    this.centerLabel.BackColor = chartControl.ChartArea.BackInterior.BackColor;

    int labelWidth = centerLabel.Size.Width;
    int labelHeight = centerLabel.Size.Height;

    var areaBound = chartControl.ChartArea.GetSeriesBounds(chartSeries);
    var chartBound = chartControl.Location;
    var center = chartControl.ChartArea.Center;

    //Center label location.
    int x = (int)((chartBound.X + areaBound.X) + ((areaBound.Width / 2 - labelWidth / 2)));
    int y = (int)((chartBound.Y + areaBound.Y) + ((areaBound.Height / 2 - labelHeight / 2)));
    this.centerLabel.Location = new System.Drawing.Point((int)x, (int)y);
}

Private Sub ChartControl1_ChartAreaPaint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs)
    ' After chart loaded
    Me.centerLabel.AutoSize = True
    Me.centerLabel.Size = New System.Drawing.Size(10, 13)
    Me.centerLabel.Text = "5" & vbCrLf & "TOTAL" & vbCrLf & "PRODUCTS"
    Me.centerLabel.Font = New Font("", 10, FontStyle.Bold)
    Me.centerLabel.TextAlign = ContentAlignment.MiddleCenter
    Me.centerLabel.BackColor = Me.chartControl.ChartArea.BackInterior.BackColor

    Dim labelWidth As Integer = Me.centerLabel.Size.Width
    Dim labelHeight As Integer = Me.centerLabel.Size.Height

    Dim areaBound = Me.chartControl.ChartArea.GetSeriesBounds(Me.chartSeries)
    Dim chartBound = Me.chartControl.Location
    Dim center = Me.chartControl.ChartArea.Center

    ' Center label location
    Dim x As Integer = CInt((chartBound.X + areaBound.X) + ((areaBound.Width / 2.0 - labelWidth / 2.0)))
    Dim y As Integer = CInt((chartBound.Y + areaBound.Y) + ((areaBound.Height / 2.0 - labelHeight / 2.0)))
    Me.centerLabel.Location = New System.Drawing.Point(x, y)
End Sub

For more details, refer to the documentation and check out the complete sample on the GitHub.

Conclusion

I hope you enjoyed learning about how to add a view at the center hole of WinForms Donut Charts.

You can refer to our WinForms Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. You can also explore our WinForms Chart examples to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

How to add a view at the center hole of WinForms Donut Charts?

Access denied