C3: Changing colors of bars in bar chart

Created on 21 May 2014  路  2Comments  路  Source: c3js/c3

  1. How do I customise bar chart when x-axis data is String, so that I can get different color for each bar plotted.
  2. While making bar chart vertical, "rotate:true" x-axis tick does not get rotated.
C-feature-request question

Most helpful comment

Hi, You can do that by using data.color option. Please see this fiddle: http://jsfiddle.net/gUf6a/1/ . And the option to rotate axis is axis.rotated, not axis.rotate.

As discussed in #245 , I think a new feature would be needed to achieve your purpose completely. I'm going to add that in near future as #16 , so please give me some time and sorry for inconvenience.

All 2 comments

You do a setTimeout(function(){
// then loop through each rect in svg for the chart
$('.c3-bars-data1 path').each(function(){
//set your fill here for each rect
var rect = $(this);
//y1_data and y2_data are the originally data series i had in the chart

var y1_point = y1_data[i];
var y2_point = y2_data[i];
    if(y1_point >= y2_point){
    rect.css({fill:'#f45239'});
}

})
},300)

Hi, You can do that by using data.color option. Please see this fiddle: http://jsfiddle.net/gUf6a/1/ . And the option to rotate axis is axis.rotated, not axis.rotate.

As discussed in #245 , I think a new feature would be needed to achieve your purpose completely. I'm going to add that in near future as #16 , so please give me some time and sorry for inconvenience.

Was this page helpful?
0 / 5 - 0 ratings