JSFiddle - React, Tailwind, and code Playground

by ismusidhu

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 () {
    var names = ["DAVE", "JOHN"];
    var projects = ["Project 1", "Project 2"];
    $('#container').highcharts({

        chart: {
            type: 'bubble',
            plotBorderWidth: 1,
            zoomType: 'xy'
        },

        title: {
            text: 'Highcharts for staff project time'
        },

        xAxis: {
            categories: ['Project 1', 'Project 2', 'Project 3']
        },



        series: [{
            data: [{
                x: 0,
                y: 4,
                z: 5,
                color: 'blue'
            }, {
                x: 1,
                y: 7,
                z: 3,
                color: 'blue'
            }, {
                x: 2,
                y: 8,
                z: 6,
                color: 'blue'
            }],
        }]

    });
});