Highcharts Demo

author(s): Torstein Hønsi

by Chitkala More

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>


<div id="areaChart-all" style="height: 400px; min-width: 310px"></div>

JavaScript

var data=[];
var dataGlucose=[125,242,131,160,127,109,142,200,147,189,135,176,242,149,122,156,134]; 
var last = new Date(new Date().getTime() - (dataGlucose.length * 24 * 60 * 60 * 1000));
var date =last.getDate();
var month=last.getMonth()+1;
var year=last.getFullYear();

for(var i=0; i<=dataGlucose.length; i++){
      var day=new Date(year, month-1, date + i);
      data.push(new Array(day.getTime(), dataGlucose[i]))
}

var chart = {
    "data": data
    ,
    "option": {
        "colors": ['#28c590', '#ff5050']
    }
}
chart.data.forEach(function (el, i) {
    
    chart.data[i] = {
        x: el[0],
        y: el[1],
        marker: {
            lineColor: el[1] < 150 ? chart.option.colors[0] : chart.option.colors[1]
        }
    }
});

// Create the chart
Highcharts.chart('areaChart-all', {
    exporting: {
        enabled: false,
        menuItems: null
    },
    legend: {
        enabled: true
    },
    credits: {
        enabled: false
    },
    rangeSelector: {
       // selected: 1
    },

    title: false,

    series: [{
        showInLegend:false,
        marker: {
            symbol: 'circle',
            radius: 8,
            lineColor: '#30c794',
            lineWidth: 2,
            enabled: true,
            fillColor: '#FFF',
        },
        data: chart.data,
        dataLabels: {
            enabled: true,
            formatter: function () {
                let color = this.y < 150 ? chart.option.colors[0] : chart.option.colors[1];
                return '<tspan style="color:' + color + ';font-size:18px;font-family:robotoregular;">' + this.y + '</tspan>';
            }
        },
        type: 'areaspline',
        threshold: null,
        tooltip: {
            valueDecimals: 2,
            crosshairs: true,
            shared: true,
        },
        fillColor: {
            linearGradient: {
                x1: 0,
                y1: 0,
                x2: 0,
                y2: 1
            },
            stops: [
             ...