CODEWITHSUNDEEP
highchartsd3.js
Mike
Mike

Reputation: 8100

Highcharts Shadow/Fill Graph

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.

D3 graph screenshot

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?

Upvotes: 1

Views: 684

Answers (1)

Ricardo Lohmann
Ricardo Lohmann

Reputation: 26320

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/

Upvotes: 4

Related Questions