JSFiddle - React, Tailwind, and code Playground

by Evan Sharp

HTML

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

JavaScript

$(function () {

    // This generates dummy data for now
    // TODO: Remove this function when getting data from API is a thing
    function rand() {
        return Math.floor(Math.random() * 10000 + 1000);
    }

    // This generates dummy data for now
    // TODO: Remove this function when getting data from API is a thing
    function month(n) {
        var now = new Date();
        return (new Date(now.getFullYear(), now.getMonth() - n)).valueOf();
    }

    $('#container').highcharts({
        title: {
            text: null
        },
        navigation: {
          buttonOptions: {
            enabled: false
          }
        },
        credits: false,
        legend: {
            enabled: false
        },
        xAxis: {
            type: 'datetime',
            units: [
                ['month', [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]]
            ],
            dateTimeLabelFormats: {
                month: '%B'
            },
            tickLength: 0
        },
        yAxis: {
            title: {
                text: 'Members'
            },
            min: 0,
            lineWidth: 1,
            tickWidth: 1,
            tickLength: 10,
            gridLineWidth: 0
        },
        plotOptions: {
            series: {
                lineWidth: 0,
                states: {
                    hover: {
                        lineWidthPlus: 0
                    }
                }
            }
        },
        tooltip: {
          formatter: function () {
            return '<b>' + Highcharts.dateFormat('%B', new Date(this.x)) + '</b><br/>' + this.y;
          }
        },
        series: [{
            name: 'Members Enrolled',
            data: [{
                x: month(3),
                y: rand()
            },{
                x: month(2),
                y: rand()
            }, {
                x: month(1),
                y: rand()
            }, {
                x: month(0),
                y: rand()
            }]
    ...