I have the following bar chart in c3.js (here's a fiddle):

var chart = c3.generate({

  data: {
    x: 'Letter',
    columns:
    [
      ['Letter', 'A','B','C','D'],
      ['value', 25,50,75,100]
    ],

    type: 'bar',

        colors: {
        value: '#FF0000'
    },

  },
  axis: {
    x: {
      type: 'category'
    }
  },
  legend: {
    show: false
  }
});

This sets all the bars to red. What I would like is the colors of the bars to be this gradient from FF0000 to 10FF00, which I believe is just in increments of adding 4096 to the decimal value of the color.

I'd like the gradient to start at 50 and end at 100 (that is, anything green and below would be solid red FF0000, and 100 would be green 10FF00).

I was trying to follow this example to set the color of a data point on a c3.js graph based on its value. In the example, the value of data3 is darkened as its value goes up. I've been trying to modify the color: function (color, d), but I can't seem to get it to do anything that I want it to.

Any help would be appreciated. Thanks!

I have the following bar chart in c3.js (here's a fiddle):

var chart = c3.generate({

  data: {
    x: 'Letter',
    columns:
    [
      ['Letter', 'A','B','C','D'],
      ['value', 25,50,75,100]
    ],

    type: 'bar',

        colors: {
        value: '#FF0000'
    },

  },
  axis: {
    x: {
      type: 'category'
    }
  },
  legend: {
    show: false
  }
});

This sets all the bars to red. What I would like is the colors of the bars to be this gradient from FF0000 to 10FF00, which I believe is just in increments of adding 4096 to the decimal value of the color.

I'd like the gradient to start at 50 and end at 100 (that is, anything green and below would be solid red FF0000, and 100 would be green 10FF00).

I was trying to follow this example to set the color of a data point on a c3.js graph based on its value. In the example, the value of data3 is darkened as its value goes up. I've been trying to modify the color: function (color, d), but I can't seem to get it to do anything that I want it to.

Any help would be appreciated. Thanks!

• javascript
• html
• d3.js
• graph
• c3.js

2 Answers 2

I'm not sure what you did inside color: function, but it is the correct way to set it up. Regarding your desired gradient, it cannot be achieved by just increasing its hex value because going from yellow to green requires decreasing the value. The following example goes from red to yellow:

var chart = c3.generate({
  data: {
    x: 'Letter',
    columns:
    [
      ['Letter', 'A','B','C','D'],
      ['value', 25,50,75,100]
    ],
    type: 'bar',
    colors: {
      value: function(d) {
        return '#'+(0xff0000+(d.value-25)*256*3).toString(16);
      }
    },
  },
  axis: {
    x: {
      type: 'category
    }
  },
  legend: {
    show: false
  }
});

fiddle

you can adding in your css like a

.c3-bar-0 {
   fill:rgb(204, 0, 102)!important;
}
.c3-bar-1 {
   fill:rgb(51, 153, 255)!important;
}
.c3-bar-2 {
   fill: rgb(0, 255, 204)!important;
}