Highcharts Demo

author(s): Torstein Hønsi

by Danielle Parkinson

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

Highcharts.chart('container', {
    chart: {
        type: 'area'
    },
    title: {
        text: 'Area Stacked Trend example'
    },
    subtitle: {
        text: 'For stacked column chart trends'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'etc'],
        tickmarkPlacement: 'on',
        title: {
            enabled: false
        }
    },
    yAxis: {
        title: {
            text: ' '
        },
        max: 100,
        labels: {
            formatter: function () {
                return this.value;
            }
        }
    },
    colors: [
    	'#30aa64',
      '#ffc711',
      '#e72829',
      '#333F48'
    ],
    tooltip: {
        split: true,
        valueSuffix: ' millions'
    },
    plotOptions: {
        area: {
            stacking: 'normal',
            lineColor: '#666666',
            lineWidth: 1,
            marker: {
                lineWidth: 1,
                lineColor: '#666666'
            }
        }
    },
    series: [{
        name: 'Rewards is better',
        data: [10, 11, 13, 16, 19]
    }, {
        name: 'Same as Rewards',
        data: [32, 35, 34, 33, 27]
    }, {
        name: 'Rewards is worse',
        data: [44, 41, 39, 35, 34]
    },
    {
        name: 'Dont know',
        data: [14, 14, 15, 16, 20]
    }]
});