JSFiddle - React, Tailwind, and code Playground

by Torstein Hønsi

HTML

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

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

CSS

.highcharts-tooltip h3 {
    margin: 0.3em 0;
}

JavaScript

$(function () {


    Highcharts.wrap(Highcharts.seriesTypes.bubble.prototype, 'translate', function (proceed) {
    	proceed.call(this);
        var minZ = Math.min.apply(0, this.zData),
            maxZ = Math.max.apply(0, this.zData),
            minColor = Highcharts.ColorAxis.prototype.defaultColorAxisOptions.minColor,
            maxColor = Highcharts.ColorAxis.prototype.defaultColorAxisOptions.maxColor;

        Highcharts.each(this.points, function (point) {
            point.color = Highcharts.ColorAxis.prototype.tweenColors(
                new Highcharts.Color(minColor),
                new Highcharts.Color(maxColor),
                (point.z - minZ) / (maxZ - minZ)
            );
        });
    });

    $('#container').highcharts({

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

        legend: {
            enabled: false
        },

        title: {
            text: 'Sugar and fat intake per country'
        },

        subtitle: {
            text: 'Source: <a href="http://www.euromonitor.com/">Euromonitor</a> and <a href="https://data.oecd.org/">OECD</a>'
        },

        xAxis: {
            gridLineWidth: 1,
            title: {
                text: 'Daily fat intake'
            },
            labels: {
                format: '{value} gr'
            },
            plotLines: [{
                color: 'black',
                dashStyle: 'dot',
                width: 2,
                value: 65,
                label: {
                    rotation: 0,
                    y: 15,
                    style: {
                        fontStyle: 'italic'
                    },
                    text: 'Safe fat intake 65g/day'
                },
                zIndex: 3
            }]
        },

        yAxis: {
            startOnTick: false,
            endOnTick: false,
            title: {
                text: 'Daily sugar intake'
            },
            labels:...