Highcharts Demo

author(s): Torstein Hønsi

by Chitkala More

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: 'areaspline'
    },
    title: {
        text: 'Average fruit consumption during one week'
    },
    
    xAxis: {
        categories: [
            'Monday',
            'Tuesday',
            'Wednesday',
            'Thursday',
            'Friday',
            'Saturday',
            'Sunday'
        ],
    },
    yAxis: {
        title: {
            text: 'Glucose (mg/dl)'
        },
       /*  plotBands: [{
            color: {
                linearGradient: { x1: 1, y1: 1, x2: 1, y2: 0 },
                stops: [
                    [0, 'rgb(255, 255, 255)'],
                    [1, 'rgb(200, 200, 255)']
                ]
            },
            from: 0,
            to: 7
        }], */
    },
    tooltip: {
        shared: true,
        valueSuffix: ' units'
    },
    credits: {
        enabled: false
    },
    plotOptions: {
        areaspline: {
            fillOpacity: 0.5
        }
    },
    series: [{
        name: 'date',
        data: [3, 4, 3, 5, 4, 10, 12],
         color: {
                linearGradient: { x1: 1, y1: 1, x2: 1, y2: 0 },
                stops: [
                    [0, 'rgb(246, 250, 253)'],
                    [1, 'rgb(220, 237, 248)']
                ]
            },
            
            from: 0,
            to: 7
    }]
});