Kendo chart label color

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

1. i use the labels.visual configuration
2. 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)
3. make use of new kendo.drawing.Group(); specifically the drawDOM function + kendo template
4. make use of new kendo.drawing.Layout() to append the drawed DOM on the correct place , i followed this some of the tips here
5. And do take note in your fiddle the kendo version is 2013, well i used the 2018.1.221