Question

I was working with the D3 graphing library, but due to its lack of native IE8 support, I would like to switch to HighCharts.

Using D3, I was able to create the following graph using CSS classes with the ‘fill’ property.

There are 5 series of values that have produced that graph; the first defines the top of the light gray area, the second defines the top of the dark gray area, the third defines the blue line, etc.

Is it possible to create something similar using HighCharts?

Answer 1

Probably as you can see here at http://www.highcharts.com/demo/area-negative

Html:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; 
    height: 400px; margin: 0 auto"></div>

Javascript/jQuery:

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'area'
        },
        title: {
            text: 'Area chart with negative values'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'John',
            data: [5, 3, 4, 7, 2]
        }, {
            name: 'Jane',
            data: [2, -2, -3, 2, 1]
        }, {
            name: 'Joe',
            data: [3, 4, 4, -2, 5]
        }]
    });
});

Link to jsfiddle: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/area-negative/