C3.js fill area between curves

Question

i have chart like this

I need to fill 3 area between dashed line. for example : fill area between 2 red dashed line, 2 blue dashed line and 2 green dashed line.

I try do it like this:

function fillArea(){
    var d = {};
    var x = [];
    var y1 = [];
    var y0 = [];

    for(var i = 0; i < chartJson.length; i++){
        x.push(chartJson[i].run_date);
        y0.push(chartJson[i].diviationMinus);
        y1.push(chartJson[i].diviationPlus);
    }
    d.x = x;
    d.y1 = y1;
    d.y0 = y0;


    var area = d3.svg.area()
                 .x(function(d) {return x(d.x); })
                 .y0(function(d) { return y(d.y0); })
                 .y1(function(d) { return y(d.y1); });  

}
fillArea();

but nothing happen. Here is jsfiddle https://jsfiddle.net/1xnc6y58/

It would be easy to help if you add a fiddle with some sample data — Gilsha, Oct 16 '15 at 07:57

mandyzhu7 · Answer 1 · 2017-05-30T07:42:23.930

4

Change the fillArea() function into the code below:

function fillArea(){
    var yscale = chart.internal.y; 
    var xscale = chart.internal.x; 
var indexies = d3.range( chartJson.length );

var area = d3.svg.area()
                         .interpolate("linear")
             .x(function(d) {return xscale(chartJson[d].x); })
             .y0(function(d) { return yscale(chartJson[d].y0); })
             .y1(function(d) { return yscale(chartJson[d].y1); }); 

 d3.select("#chart svg g")
  .append('path')
  .datum(indexies)
  .attr('class', 'area')
  .attr('d', area);}

Added css:

path.area { 
  stroke: lightgreen;
  fill: #e6ffe6;
  opacity: 0.9   }

Working fiddle: fill between lines c3.js

However if the X axis is a timeseries, the xscale(here should be a date object instead of the string). Here is an timeseries example: Timeseries C3.js fill between lines

edited May 30 '17 at 07:42

answered May 29 '17 at 14:37

mandyzhu7

81
6

Do you know how to make this approach work with resizing the window? – sebsasto Jul 22 '19 at 16:28
@sebsasto On window resizing, the areas need to be removed and filled. I am not so sure if there is some better solutions. Here is an [example](https://github.com/zhu-7/Fill-Between-Lines/blob/d524dd9b9cd3a03601b7515fcfe7b9d5f31ab60e/Fill_between_lines_usage_example.html#L250) – mandyzhu7 Jul 23 '19 at 20:11
If X axis is type category, then what do we have to do for xscale ? – Subhash Diwakar Nov 30 '19 at 11:25
@SubhashDiwakar The first fiddle example is for ordinal axis. – mandyzhu7 Dec 02 '19 at 15:34
@mandyzhu7 If I didn't make myself clear. In my x-axis, I am using the type category. e.g. ''6th-Fall", "6th-Spring" will be plotted on the x-axis of my chart – Subhash Diwakar Dec 02 '19 at 15:39
1

@SubhashDiwakar an example [here](https://jsfiddle.net/Mandyzhu7/oc8La3mf/1/) – mandyzhu7 Dec 03 '19 at 08:09
@mandyzhu7 Thanks. I have done the same code I am doing in my project [link here](https://jsfiddle.net/subhashD/5q1sfrmc/3/) . It works on jsfiddle but not in project. – Subhash Diwakar Dec 03 '19 at 09:45
@mandyzhu7 if I could, I would double-down on the points. Thanks! – scooterlord Sep 17 '20 at 09:02

C3.js fill area between curves

1 Answers1

Linked