JSFiddle - React, Tailwind, and code Playground

by Ayri Rin

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

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

JavaScript

$(function () {
    $('.container-g').highcharts({
        chart: {
            type: 'spline'
        },
        title: {
           text: ''
           },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: { // don't display the dummy year
                month: '%b'
            }
        },
        yAxis: {
            title: {
                text: ''
            },
            labels: {
                formatter: function () {
                    return this.value + 'k';
                }
            },
            min: 0 
        },
        legend: {
            enabled: false
        },

        credits: {
            enabled: false
        },
        tooltip: {
            headerFormat: '',
            pointFormat: '{point.x:%e. %b}: {point.y:.2f} k'
        },
        plotOptions: {
            spline: {
                marker: {
                    enabled: true,
                    fillColor: '#1392db',                         					lineColor: '#1392db'
                }
            }
        },

        series: [{
            name: ' ',
            data: [
                [Date.UTC(2016, 1, 3), 102],
                [Date.UTC(2016, 1, 11), 112],
                [Date.UTC(2016, 1, 25), 12],
                [Date.UTC(2016, 2, 11), 118],
                [Date.UTC(2016, 3, 11), 119],
                [Date.UTC(2016, 4, 1), 185],
                [Date.UTC(2016, 4, 5), 222],
                [Date.UTC(2016, 4, 19), 115],
                [Date.UTC(2016, 5, 3), 20],
                [Date.UTC(2016, 9, 21), 50],
                [Date.UTC(2016, 10, 4), 28],
                [Date.UTC(2016, 10, 9), 25],
                [Date.UTC(2016, 10, 27), 2]
            ]
        }]
    });
});