New to Kendo UI for VueStart a free 30-day trial

Customize the Label Colors of a Donut Chart with Multiple Series

Environment

Product Version3.3.2
ProductProgress® 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

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 ...