JSFiddle - React, Tailwind, and code Playground

by Swapnil Navalakha

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

JavaScript

$(function () {
    new Highcharts.Chart({
            chart: {
                renderTo: "container",
                type: "line",
                marginRight: 30,
                marginBottom: 40
            },
            title: {
                text: "Memberships per Day (Last 6 Months)",
                align: "left", 
                margin: 20, 
                style: {
                    fontSize: "12px", 
                    fontWeight: "bold"
                }
            }, 
            legend: {
                enabled: false
            }, 
            credits: {
                enabled: false
            }, 
            colors: [ "#89A54E" ], 
            xAxis: {
                type: "datetime", 
                tickmarkPlacement: "on", 
                labels: {
                    formatter: function() {
                        return Highcharts.dateFormat( "%b '%y", this.value );
                    }
                }
            }, 
            yAxis: {
                minPadding: 0, 
                maxPadding: 0,         
                min: 0, 
               / max:1,
                showLastLabel:false,
                tickInterval:1,
                title: {
                    text: ""
                }
            }, 
            tooltip: {
                borderColor: "#9C9C9C", 
                borderWidth: 1, 
                crosshairs: true, 
                shared: true, 
                formatter: function() {
                    var s = '<span style="font-size:10px; font-weight:bold;">' + Highcharts.dateFormat( '%A, %b %e, %Y', this.x ) + "</span>";
                    $.each( this.points, function( i, point ) {
                        s += '<br /><span style="font-size:10px; color:' + point.series.color + '">' + point.series.name + ':</span><span style="font-size:10px;">' + point.y + '</span>';
                    });
                    return s;
                } 
            },
            plotOptions: {
               ...