C3: How customize chart background with gradient color

[nvcken]

[masayuki0812]

Hi, This might help. Could you try this? Thanks.
https://groups.google.com/forum/?utm_medium=email&utm_source=footer#!searchin/c3js/gradient/c3js/t1AogCdSVzg/8eVX3iMMHzQJ

[psi-4ward]

I struggled with this question too.
There are two probles:

• injecting the gradient-markup into svg.defs
• using it within the fill style

First one can be solved using some scripts like in the GoogleGroup thread but using it is a bit complicated cause c3 renders the element on various actions, so i think we should implement a simple api for that.

[psi-4ward]

Got a working example here but like you see drawing the area background with the same color as the line color is an unpracticable solution.

http://jsfiddle.net/ha3L5z3b/

[masayuki0812]

Hi @psi-4ward , I think this issue is about the background of chart, not area chart. However, It would be nice if we can set gradient color easily. So, I'll work on this later.

[ivarkallejarv]

Combining methods from multiple sources, I arrived at this solution for changing the background of the chart -

//Set background opacity and fill
d3.selectAll('.chart g.c3-event-rects').style('fill-opacity', '1');
d3.selectAll('.chart g.c3-event-rects').style('fill', 'url(#something)');

//Insert gradient

let gradient = d3.select('defs')
.append('linearGradient')
.attr('id', 'gradient')
.attr('x1', '50%').attr('y1', '0%')
.attr('x2', '50%').attr('y2', '100%');

gradient
  .append('stop')
  .attr('offset', '0%')
  .attr('stop-color', '#FFFFFF')
  .attr('stop-opacity', '1');

gradient
  .append('stop')
  .attr('offset', '100%')
  .attr('stop-color', '#B38EE8')
  .attr('stop-opacity', '0');

It would be very nice if this was documented as well. I mean using gradients through inserting with d3 and using css notation as was mentioned in #1098 at least until support for gradients is made available

[panthony]

Hi,

The issue queue is to be used for reporting defects and problems with C3.js, in addition to feature requests and ideas.

It is not a catch-all support forum.

For general support enquiries, please use the Google Group at https://groups.google.com/forum/#!forum/c3js.

All questions involving the interplay between C3.js and any other library (such as AngularJS) should be posted there first!

Thank you!