JSFiddle - React, Tailwind, and code Playground

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=[
 [
        1502710400000,
        147
    ],
    [
        1502717400000,
        142
    ],
    [
        1502803800000,
        109
    ],
    [
        1502890200000,
        127
    ],
    [
        1502976600000,
        160
    ],
    [
        1503063000000,
        131
    ],[
        1503322200000,
        242
    ],
    [
        1503408600000,
        125
    ],
    
]; 

/* 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() +12;
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]))
} */

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

        title: {
            text: 'Glucose level'
        },

        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,...