JSFiddle - React, Tailwind, and code Playground

by Geo George

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/funnel.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<div id="container" style="height: 300px, width=400px"></div>
<pre id="csvd" style="display: none">Departments, Quarter1, Quarter2, Quarter3
           Commercial,70.65,55.86,26.48
           Production,18.73,21.72,11.34
           Sales,58.58,62.24,38.95
           HR,10.25,5.99,3.26           
      </pre>

JavaScript

$(document).ready(function() {
    var fixedCsv = document.getElementById('csvd').innerHTML;

    var options = {
        chart: {
            renderTo: 'container',
            type: 'scatter',
            //zoomType: 'xy',
            inverted: false
        },
        xAxis: {
            categories: ['test1',"test2"]
        },
        plotOptions: {
            scatter: {
                lineWidth: 1
            }
        },
        series: [{
                name: 'Commercial',
                colorByPoint: true,
                data: [{
                    y: 70.65,
                    x: 0
                }, {
                    y: 55.86,
                    x: 0
                }]
            },
            {
                name: 'Production',
                colorByPoint: true,
                data: [{
                    y: 18.73,
                    x: 1
                }, {
                    y: 21.72,
                    x: 1
                }]
            }

        ]
    };

    var chart = new Highcharts.Chart(options);

});