JSFiddle - React, Tailwind, and code Playground

by Pavel Savushchyk

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": {
            "renderTo": "chartContainer", "zoomType": "xy", "type": "bubble", "polar": false
        },
        "credits": {"enabled": false},
        "title": {"text": null},
        "tooltip": {"valueDecimals": 2, "useHTML": true, "shared": false},
        "xAxis": {
            "title": {"text": "Unit Sales"},
            "labels": {"step": 1, "maxStaggerLines": 1, "rotation": -45}, 
            "offset": 0, 
            "startOnTick": true, 
            "endOnTick": true
        },
        "yAxis": {
            "title": {"text": "Store Cost"}, 
            "labels": {"rotation": 0, "step": 1}
        },
        "plotOptions": {
            "series": {
                "marker": {"enabled": true}, 
                "tooltip": {}, 
                "turboThreshold": 1000
            }, 
            "bubble": {
                "shadow": true
            }
        },
        "series": [
            {
                "name": "",
                    "data": [
                    {"x": 259478, "y": 220172.72819999701, "z": 549485.96, "name": "F"},
                    {"x": 250509, "y": 212393.00070000158, "z": 529661.5099999908, "name": "M"}
                ],
                "color": "rgba(13, 35, 58, 0.75)",
                "yAxis": 0,
                "tooltip": {
                    "headerFormat": "{point.key}<br/>",
                    "pointFormat": "Unit Sales : <b>{point.x:,.2f}</b><br/>Store Cost : <b>{point.y:,.2f}</b><br/>Store Sales : <b>{point.z:,.2f}</b> ",
                    "followPointer": true
                }
            }
        ],
        "legend": {"enabled": false}
    });
    
});