hotspring hotspring - 3 months ago 20
Javascript Question

Legend and Bar Chart Colors do not match

I have the following implementation and I used colorField to assign colors. However, even though I color the bar stack objects properly, but this color does not match with legend color. I thought it should be binded somehow, how should I fix it?

I have used

, because I want to assign same color for paired objects in bar stack column.


data[0] = {
"value": 29,
"series": 1,
"category": "Men",
"fname": "NY",
"valueColor": "black"

enter image description here


Here is a solution, although it feels kind of hacky.

js fiddle

I used legend.item.visual to redraw the legend and pulled in the valueColor from the data, which was nicely passed along to the legened.item.visual function.

legend: {
        item: {
            visual: function (e) {

                var color = ""

                for (var i=0;i<;i++){
                    if ([i].valueColor != "" &&[i].fname != "") {
                    color =[i].valueColor

              var rect = new kendo.geometry.Rect([0, 0], [100, 50]);
              var layout = new kendo.drawing.Layout(rect, {
                spacing: 5,
                alignItems: "center"

              var marker = new kendo.drawing.Path({
                fill: {
                  color: color
              }).moveTo(10, 0).lineTo(10, 10).lineTo(0, 10).lineTo(0,0).close();

              var label = new kendo.drawing.Text(, [0, 0], {
                fill: {
                  color: "black"

              layout.append(marker, label);

              return layout;