New to Kendo UI for Vue? Start a free 30-day trial
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
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 ...