# Customize the Label Colors of a Donut Chart with Multiple Series

## Environment

<table>
    <tbody>
	    <tr>
	    	<td>Product Version</td>
	    	<td>3.3.2</td>
	    </tr>
	    <tr>
	    	<td>Product</td>
	    	<td>Progress® Kendo UI for Vue</td>
	    </tr>
    </tbody>
</table>

## Description

The current Knowledge base article uses this [Donut Chart - Displaying Multiple Series](https://www.telerik.com/kendo-vue-ui/components/charts/donut#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](https://www.telerik.com/kendo-vue-ui/components/knowledge-base/donut-chart-multiple-series-different-label-colors#solution-description)
* [Runnable example](https://www.telerik.com/kendo-vue-ui/components/knowledge-base/donut-chart-multiple-series-different-label-colors#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

[Demo Source](https://demos.telerik.com/kendo-vue-ui/knowledge-base/donut-chart-multiple-series-different-label-colors/source.txt)