This is a migrated thread and some comments may be shown as answers.

Change Bar/Column Color For Each Point

5 Answers 342 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Nick
Top achievements
Rank 1
Nick asked on 23 Feb 2012, 12:07 AM
Is there any possible way to change the color of an individual bar/column in a series based on some condition?

5 Answers, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 23 Feb 2012, 09:15 AM
Hello,

No, this is not currently possible. We've received such request before and we'll consider providing it in future versions.

Please accept our apologies for the caused inconvenience.

All the best,
Tsvetomir Tsonev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Ken
Top achievements
Rank 1
answered on 15 Mar 2012, 03:07 PM
I was able to do this by creating a series for each data point.  It isn't very clean and feels like a hack but it worked for now.
0
Alex
Top achievements
Rank 1
answered on 16 Apr 2012, 05:13 PM
Please refer to this question. I believe this would be a wonderful feature for your team to focus on.

http://stackoverflow.com/questions/10143726/how-do-you-make-a-bar-a-different-color-in-kendoui-bar-chart/10177638#10177638 
0
David
Top achievements
Rank 1
answered on 21 Aug 2015, 09:41 AM
Do you have any updates on it?
0
T. Tsonev
Telerik team
answered on 26 Aug 2015, 08:07 AM
Hi,

Currently, there are a number of options to do this. You can bind the color to a model field or you can evaluate the color at runtime.

The later option is very flexible and can be customized to respond to many conditions. For example:
<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>

I hope this helps,

Regards,
T. Tsonev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Charts
Asked by
Nick
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Ken
Top achievements
Rank 1
Alex
Top achievements
Rank 1
David
Top achievements
Rank 1
Share this question
or