JSFiddle - React, Tailwind, and code Playground

by ashleycam3ron

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

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

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'bubble',
            zoomType: 'xy'
        },
        title: {
            text: 'Energy Use Over the Course of A Day'
        },
        legend: {
            title:  {
                text: 'Person',
                style: {
                    fontStyle: 'italic'
                }
            }
        },
        yAxis: {
            floor: 0,
            ceiling: 10,
            min: 0,
            max: 10,
            title: {
                text: 'Power Consumption (kWh)'
            },
            tickInterval: .5
        },
        xAxis: {
            title: {
                text: 'Time of Day'
            },
            categories: ['8AM', '9AM', '10AM', '11AM', '12PM', '1PM', '2PM', '3PM', '4PM', '5PM']
        },
        series: [{
            name: 'John',
            data: [.5,.5,.5]
        }, {
            name: 'Todd',
            data: [[0,2.37196,3], [1,3.56037,25], [2,2.50481,25], [3,2.60046,26], [4,4.42134,44], [5,5.13075,51], [6,5.35782,53], [7,3.95145,39], [8,3.0428,30], [9,2.9063,29]]
        }, {
            name: 'Intern',
            data: [[5,2.37196,3], [1,3.56037,90], [2,2.50481,25], [3,2.60046,26], [4,4.42134,44], [5,5.13075,51], [6,5.35782,53], [7,3.95145,39], [8,3.0428,30], [9,2.9063,29]]
        }, {
            name: 'Ryan',
            data: [[0,2.37196,3], [1,3.56037,25], [2,2.50481,25], [3,2.60046,26], [4,4.42134,44], [5,5.13075,51], [6,5.35782,53], [7,3.95145,39], [8,3.0428,30], [9,2.9063,29]]
        }, {
            name: 'Conf Room Guy',
            data: [4,2,5]
        }],
        plotOptions: {
            series: {
                animation: {
                    duration: 2000
                }
            },
            bubble: {
                minSize: 3
            }
        },
    });
});