JSFiddle - React, Tailwind, and code Playground

by jhoguet

HTML

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

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

JavaScript

//
var chart1; // globally available
$(document).ready(function() {
    chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'spline'
        },
        title: {
            text: 'Sprint 7 '
        },
        subtitle: {
            text: 'Circular Manager 3'
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: { // don't display the dummy year
                month: '%e. %b',
                year: '%b'
            }
        },
        yAxis: {
            title: {
                text: 'Hours'
            },
            startOnTick: true,
            endOnTick: true,
            tickInterval: 20,
            min: 0,
            minPadding: .2
        },
        series: [{
            name: 'Planned',
            data: [
              [Date.UTC(2012, 2, 19), 150],
              [Date.UTC(2012, 3, 6), 0   ]
            ]
        },
        {
            name: 'Actual',
            data: [
                [Date.UTC(2012, 2, 19), 150],
                 [Date.UTC(2012, 2, 21), 120],
            ]
        }]
    });
});