JSFiddle - React, Tailwind, and code Playground

by corinnekm

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 500px; min-width: 500px"></div>

JavaScript

$(function () {
    var data = [0, 0, 0, 0, 0, 0, 0, 148.5, 216.4, 194.1, 95.6, 54.4, 100 ,10],
        dLen = data.length;

    for (var i = 0; i < dLen; i++) {
        data[i] = [Date.UTC(2005, i, 1),data[i]];
    }


    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            zoomType: 'x',
            spacingRight: 20
        },
        title: {
            text: 'CDP Creation per Month'
        },
        subtitle: {
            text: document.ontouchstart === undefined ?
                'Click and drag in the plot area to zoom in' :
                'Drag your finger over the plot to zoom in'
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: {
                second: '%H:%M:%S',
                minute: '%H:%M',
                hour: '%H:%M',
                day: '%e. %b',
                week: '%e. %b',
                month: '%b', //month formatted as month only
                year: '%Y'
            },
            labels: {
                style: {
                    fontFamily: 'Tahoma'
                },
                rotation: -45
            },
            maxZoom: 24 * 3600 * 1000 * 30, // fourteen days
            title: {
                text: 'sample'
            }
        },
        yAxis: {
            title: {
                text: 'No.of users'
            }
        },
        tooltip: {
            shared: true,
            formatter: function () {
                var result = '<b>' + Highcharts.dateFormat('%b %e, %Y', this.x) + '</b>';
                $.each(this.points, function (i, datum) {
                    result += '<br />' + datum.y + ' users created CDP';
                });
                return result;
            }
        },
        legend: {
            enabled: false
        },

        plotOptions: {
            area: {
                fillColor: {
                    linearGradient: {
                        x1: 0,
                       ...