JSFiddle - React, Tailwind, and code Playground

by hiral

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

CSS

, ,

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'area'
        },
        title: {
            text: ''
        },
        xAxis: {
            gridLineWidth: 1,
            categories: ["Jul 24", "Jul 24", "Jul 24", "Jul 24", "Jul 24", "Jul 24", "Jul 24", "Aug 11", "Aug 11", "Aug 11", "Aug 11", "Aug 11"],
        },
        yAxis: {
            minorTickInterval: '10',
            title: {
                text: ''
            }
        },
        tooltip: {            
            color: '#707070',
            shared:true
        },
        legend: {
            enabled: false
        },
        series: [{
            color: '#DCDCDC',
            fillOpacity: 0.3,
            name: 'Current',
            data: [17, 17, 17, 52, 52, 62, 62, 48, 14, 34, 36, 13]
        }, {
            color: '#97BBCD',
            fillOpacity: 0.3,
            name: 'Overall',
            data: [9, 9, 9, 46, 46, 54, 54, 52, 6, 26, 27, 5]
        }, {
            color: '#659DCD',
            fillOpacity: 0.3,
            name: 'Long Term',
            data: [10, 11, 11, 40, 40, 57, 57, 40, 24, 26, 25, 12]
        }]
    });
});