JSFiddle - React, Tailwind, and code Playground

by core972

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/highcharts-more.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.stockChart('container', {
chart: {
    // type: 'spline',
    type: 'column',
    animation: Highcharts.svg, // don't animate in old IE
    zoomType: 'x',
},
rangeSelector: {
    enabled: false,
},
title: {
    text: "Title"
},
xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: { // don't display the dummy year
        month: '%e. %b',
        year: '%b'
    },
    labels: {
        align: 'left',
        x: 3,
        y: -3,
    },
    // TODO: fix that f*****g timezone
    min: new Date('01/01/2018').getTime() + 7200000,
    max: new Date('10/01/2018').getTime() + 7200000,
    crosshair: true,
   // tickInterval: 3600 * 1000 * 24,
},

yAxis: [
    {
        opposite: false,
        title: {
            text: "Energy",
            style: {
                color: '#F2A9A9'
            },
        },
        labels: {
            align: 'left',
            format: '{value:.,0f}',
            style: {
                color: '#F2A9A9'
            },
        },
    },
],

tooltip: {
    shared: true,
    crosshair: true
},
legend: {
    enabled: true,
},
series: [
		{
      "color": "#F2A9A9",
      "data": [
        {"y": 210.0, "x": 1514771237000},
        {"y": 120.0, "x": 1515052404000},
        {"y": 90.0, "x": 1515221072000},
        {"y": 0.0, "x": 1515311127000}
      ],
      "name": "Energy (MWh)"
    }, {
    	"color": "deepskyblue",
      "data": [
      	{"y": 0.0, "x": 1514788069000},
        {"y": 0.0, "x": 1514868337000},
        {"y": 0.0, "x": 1515074982000}
      ],
      "name": "Energy (MW)"
    }, {
    	"color": "#90ed7d",
      "data": [
      	{"y": 0.0, "x": 1514788069000},
        {"y": 0.0, "x": 1514868337000},
        {"y": 0.0, "x": 1515074982000}
      ],
    "name": "Volume"}]
});