• Introduction
  • Getting Started
  • Native Components
  • Wrapper Components
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • FAQ
  • Troubleshooting
New to Kendo UI for Vue? Start a free 30-day trial

Customize the Label Colors of a Donut Chart with Multiple Series


Product Version3.3.2
ProductProgress® Kendo UI for Vue Native


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:

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

    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.

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

Runnable example

View Source
Change Theme:

In this article

Not finding the help you need?