How to get gradient color fill in bar/pie/area charts using c3js

Question

I'am using c3js which is based on d3js for charting (using SVG elements).

Does c3js support linear gradient coloring for bar, pie and area charts? Currently I'am able to get this working, but it is a hack.

Also facing difficulty in getting rounded corner bars in stacked bar charts, because SVG doesn't support stroke left|right|top|bottom option.

I also observed that linear gradient and rounded bar charts are not supported even in NVd3 and Dimple.js.

It would be great if these two features are supported in c3js.

Answer 1

Since I have access to the d3 object from within the c3 init callback function, I appended a linear gradient on init and called that from my fill styles (in my css).

Javascript:

oninit: function () {

  d3.select('svg').append("linearGradient")
    .attr("id", "timeframe-gradient")
    .attr("gradientUnits", "userSpaceOnUse")
    .attr("x1", 0).attr("y1", 0)
    .attr("x2", 0).attr("y2", 100)
    .selectAll("stop")
    .data([
      {offset: "60%", color: "#666", opacity: 0},
      {offset: "100%", color: "#666", opacity: 1}
    ])
    .enter().append("stop")
    .attr("offset", function(d) { return d.offset; })
    .attr("stop-color", function(d) { return d.color; })
    .attr("stop-opacity", function(d) { return d.opacity;});

}

CSS (SASS):

.event-timeframe {
  rect {
    fill: url(#timeframe-gradient);
  }
}

Answer 2

This is not implemented in the current version of C3. (I have been looking for this too).

The feature has, however, been requested on the C3 GitHub issues page: https://github.com/masayuki0812/c3/issues/65

The feature has been marked as an enhancement by the owner of C3. There are many feature requests coming in for C3 so I wouldn't count on this feature being implemented by them in the nearest future.

You could ask a question in the google groups forum of C3, as there may be someone who has implemented this feature on his/her own.