CODEWITHSUNDEEP
javascriptd3.jssvgchartsc3.js
handless
handless

Reputation: 311

C3.js fill area between curves

i have chart like this chart

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/

Upvotes: 2

Views: 1971

Answers (1)

mandyzhu7
mandyzhu7

Reputation: 81

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

Upvotes: 4

Related Questions