Hover color on Kendo UI Bar Chart bars

Question

I am trying to find a way to completely change the color of a Kendo UI Bar Chart bar when it is hovered over. I do know that there is the series.highlight.color config option, but this seems to add only a tint in that color. I am wanting to completely replace the normal bar color with a different hover color. I have been pouring through the docs but can't seem to find a configuration option to do this even though it seems like there has to be a way to do this through Kendo config options without having to resort to hacking it.

Any help is much appreciated!

If you can post some code (preferably an example of what you have so far) it would massively increase your chances of a decent answer. — DBS
In Kendo UI, pretty much everything is just configuration options in JSON. So there really is no applicable code to offer. Like I mentioned above, I tried setting series.highlight.color, but that wasn't it, I believe due to an opacity set in Kendo's built-in SVG code. — LeftOnTheMoon
I have decided to try to directly target the generated SVG to change it, which does require code but it really isn't applicable to this question. However I would still be very interested whether or not there is a Kendo configuration switch in the API to do this. But curiously it seems that there is not unless there is something I am missing. — LeftOnTheMoon

ezanker ezanker · Accepted Answer · 2016-06-08T20:53:25

You can use the series.highlight.visual property to draw the bar with a solid color:

$("#chart").kendoChart({
  series: [{
      type: "bar",
      data: [1, 2],
      highlight: {
        visual: function(e) {          
          var origin = e.rect.origin;
          var bottomRight = e.rect.bottomRight();
          var topRight = e.rect.topRight();
          var topLeft = e.rect.topLeft();

          var c = "green";
          var bc = "#555";

          var path = new kendo.drawing.Path({
            fill: {color:  c,opacity: 1,},
            stroke: {color: bc,opacity:  0.7,width: 2,}
          })
          .moveTo(origin.x, bottomRight.y)
          .lineTo(bottomRight.x, bottomRight.y)
          .lineTo(topRight.x, topRight.y)
          .lineTo(topLeft.x, topLeft.y)
          .close();

          return path;    
        }
      }
  }]
});

DEMO

Within the visual function you can get at the item and base the color on value or another field, etc.

Hover color on Kendo UI Bar Chart bars

1 Answers

DEMO