How do you make a bar a different color in KendoUI bar chart?

Question

I'm am replacing my dot net charting with KendoUI. I'm showing a Score Distribution chart. I want all of the bars to be the same color except the bar with the median score and the Legend. How do I color a single bar a unique color? How would I color the Legend this new color?

Below is my old dotnet charting bar chart and below that is the new KendoUI chart I'm trying to replace it with. I just need to get that coloring right and we'll be in business. Any help is appreciated.

Answer 1

Update: I'm leaving the answer below this line intact in case there are those out there who are using an older version, but per a later comment, KendoUI now allows you to override styles for individual points in a series.

---

I don't believe you can, in the current version. That said, you can hack your way around the limitation.

You'll need to create two data series - one for your highlighted data, and one for everything else. Add both to you chart, and set them to stacked.

Here's a jsFiddle I put together to illustrate: http://jsfiddle.net/LyndsySimon/9VZdS/. It depends on KendoUI's CDN, so if it breaks in the future I apologize.

Here is the Javascript for reference:

$(function() {
    var dataset = new Array(1,2,3,null,5,6);
    var highlighted = new Array(null,null,null,4,null,null);

    $('#chart').kendoChart({
        theme: 'metro',
        seriesDefaults: {
            type: 'column',
            stack: true
        },
        series: [
            {
                name: 'Not Highlighted',
                data: dataset,
                color: '#609'
            },
            {
                name: 'Highlighted',
                data: highlighted,
                color: '#f03'
            }
        ]
    })
});​

Answer 2

Another way you can do it at runtime is using function which returns color.

API reference

Here is an example code:

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2],
    color: function(point) {
      if (point.value > 1) {
        return "red";
      }

      // use the default series theme color
    }
  }]
});
</script>