score:2

Accepted answer

c3 has nothing to offer this feature. so need to use d3 to get it through.

//on chart load
chart.load({done: function() {
      //merge the first two columns which decide the x axis. 
      var g = data[0].concat(data[1])
      //get the max min in the concatenated array
        var minmax = d3.extent(g.filter(function(d){ return !isnan(d);}));
      //make ascale for color range
      //min is '#49b5a6'
      //max is '#f86a52'
      var color = d3.scale.linear()
        .domain(minmax)
        .range(['#49b5a6', '#f86a52']);
      //iterate each circle  
      d3.selectall("circle")[0].foreach(function(c){
        var d1 = d3.select(c).data()[0];//get data for circle
        change color on timeout
        window.settimeout(function(){d3.select(c).style("fill", color(d1.x))}, 500);

      });
    },});

working example here.

score:1

c3 has a color configuration that allows you to specify a function to calculate the color of each point.

i've borrowed heavily from cyril's answer and used this configuration option:

var data = [
    ["ibm_x", 3.5, 3.0, 3.2, ...],
    ["microsoft_x", 3.2, 3.2, ...],
    ["safe", 0.2, 0.2, 0.2, 0.2, ...],
    ["losing", 1.4, 1.5, 1.5, ...],
];

// get all the x values
var g = data[0].concat(data[1])

//get the max min in the concatenated array
var minmax = d3.extent(g.filter(function(d){ return !isnan(d);}));

//make a scale for color range
//min is '#49b5a6'
//max is '#f86a52'
var heat = d3.scale.linear()
    .domain(minmax)
    .range(['#49b5a6', '#f86a52']);

c3.generate({
    data: {
        columns: data,
        ...
        color: function (color, d) {
            return heat(d.x);
        },
    },
    ...
});

fiddle here: https://jsfiddle.net/qx35z8n5/4/ (again modified from cyril's answer)


Related Query

More Query from same tag