Kendo chart label color - kendo-ui

Question

Is there any way I can show a portion of the kendo label text in a different color?
Kindly find the chart implementation here http://jsfiddle.net/52c3K/16/
$("#chart").kendoChart({
legend: {
visible: false
},
dataSource: {
data: data
} ,
seriesDefaults: {
type: "bar",
stack: true
},
series: [{
name: "AA",
field: "AA",
color: "#32CD32",
}, {
name: "BB",
field: "BB",
color: "#0000FF",
labels:{
visible: true,
template: "#: dataItem.AA # (#: dataItem.BB #)"
}
}],
valueAxis: {
max: 180,
line: {
visible: false
},
minorGridLines: {
visible: true
},
labels: {
rotation: "auto",
visible: true
}
},
categoryAxis: {
field: "Category",
majorGridLines: {
visible: false
}
},
chartArea: {
width: 500,
height: 255
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
the highlighted portion of the label in red and bold.
Your help is very much appreciated

Answer 1

This is a bit hard since we can't just use the template, I tried to play with visual and done some tweaking here and there. There result aren't perfect but please check it here on jsFiddle
I will try to explain what i have done there
i use the labels.visual configuration
e.text basically contains your label string, but i did some looping on dataSource for full data (but there is weakness in this since there may duplicate text on e.text)
make use of new kendo.drawing.Group(); specifically the drawDOM function + kendo template
make use of new kendo.drawing.Layout() to append the drawed DOM on the correct place , i followed this some of the tips here
And do take note in your fiddle the kendo version is 2013, well i used the 2018.1.221