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="container" style="height: 400px; min-width: 310px"></div>

JavaScript

var data=[
    [
        1502717400000,
        142
    ],
    [
        1502803800000,
        109
    ],
    [
        1502890200000,
        127
    ],
    [
        1502976600000,
        160
    ],
    [
        1503063000000,
        131
    ],[
        1503322200000,
        242
    ],
    [
        1503408600000,
        125
    ],
    
];
// Create the chart
    Highcharts.stockChart('container', {
		 exporting: {
        enabled: false,
        menuItems: null
      }, 
      legend: {
        enabled: true
      },
      credits: {
        enabled: true
      },
        rangeSelector: {
            selected: 1
        },

        title: {
            text: 'Goal Progress'
        },

        series: [{
            name: 'Date',
             marker: {
            symbol: 'circle',
              		radius: 4,
                  lineColor: '#30c794',
                  lineWidth: 2,
                  enabled: true,
                    fillColor: '#FFFFFF'
        	},
            data: data,
        		dataLabels: {
                enabled: true,
                color:"#28c590"
            },
            type: 'areaspline',
            threshold: null,
            tooltip: {
                valueDecimals: 2
            },
            fillColor: {
                linearGradient: {
                    x1: 0,
                    y1: 0,
                    x2: 0,
                    y2: 1
                },
                stops: [
                    [0, Highcharts.getOptions().colors[0]],
                    [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                ]
            }
        }],
       
         yAxis: {
         opposite:false,
         gridLineDashStyle: 'longdash',
          min: 0,
          max: 300,
          tickInterval: 100, 
          title: {
            text: 'Glucose (mg/dl)'
          },
          labels: {
            format: '{value}',
          },      
        plotLines: [{
               ...