Customize the Label Colors of a Donut Chart with Multiple Series

Environment

Product Version	3.3.2
Product	Progress® Kendo UI for Vue Native

Description

The current Knowledge base article uses this Donut Chart - Displaying Multiple Series demo as a basis and shows how you can customize the labels of a Donut Chart with multiple series.

KB sections

• Solution description
• Runnable example

Solution description

The customization of the Donut Chart series is based on the following function:

js

labelVisual(e) {
  const defaultLabel = e.createVisual();
  const bbox = defaultLabel.bbox();
  const group = new Group();

  group.append(
    new Text(e.dataItem.value, [bbox.origin.x, bbox.origin.y], {
      font: `bold 15px Arial`,
      fill: {
        color: e.dataItem.labelColor,
      },
    })
  );
  return group;
}

The labelColor property defined in the dataItem of a Chart series item holds the color value we want for the Chart labels.

In addition, we have the following seriesLabels data property to which the above method is passed.

js

seriesLabels: {
  visible: true,
  visual: this.labelVisual,
}

Runnable example

Change Theme

Theme

Loading ...