5

Is it possible to create an Area range chart in C3.js similar to that of Highcharts? I've attached a screenshot and link to the live sample http://www.highcharts.com/demo/arearange-line.enter image description here

The idea is to show range data, perhaps the historical high and low values, and then overlay the current year's values with a line chart. Can C3 do this?

Thanks in advance!

Cody
  • 123
  • 1
  • 5
  • I think the answer to this question currently is "no".. The answer below only works for a single data channel. If you want to plot multiple channels of data this won't work. – moof2k Apr 15 '17 at 23:18

1 Answers1

6

I don't think there is an area range graph option, but you might be able to fake it like so: 

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 300, 350, 300, 290, 225, 220],
            ['data2', 250, 320, 280, 250, 170, 180],
            ['data3', 230, 300, 240, 200, 150, 150]
        ],
        types: {
            data1: 'area',
            data2: 'line',
            data3: 'area'
        },
        colors: {
            data1: 'rgb(215, 232, 248)',
            data2: 'rgb(120, 178, 235)',
            data3: '#ffffff'
        }
    },
    point: {
        r: 1
    }
});

With css:

.c3-area {
    opacity:1;
}

Here's a fiddle: http://jsfiddle.net/ot19Lyt8/17/

Sean
  • 14,359
  • 13
  • 74
  • 124
  • Ok, I figured as much :/ I suppose the only thing that isn't quite right about your workaround is that you can't have scale lines, as they would be covered up by the "data3" series. But this is a great idea, thanks for responding. – Cody May 05 '15 at 19:19
  • If you're happy to delve into the D3 code, you can bring the grid-lines to the front, like so: http://jsfiddle.net/ot19Lyt8/22/ – Sean May 06 '15 at 06:26
  • 2
    Slightly improved to show the bubble on the line: http://jsfiddle.net/ot19Lyt8/23/ – Sean May 06 '15 at 06:38
  • Any ideas on how you could make this for negative values? – Chris Williams Jun 22 '15 at 11:44
  • @ChrisWilliams it seems to work fine with negative numbers: http://jsfiddle.net/ot19Lyt8/31/ – Sean Jun 22 '15 at 18:56
  • Ahh. Assuming you mean having both positives and negatives, I don't see an easy way to do it. – Sean Jun 22 '15 at 19:00