JSFiddle - React, Tailwind, and code Playground

by g30rg3

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>

CSS

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

JavaScript

$(function () {
    $('#container').highcharts({

        chart: {
            type: 'bubble',
            plotBorderWidth: 0,
            zoomType: 'xy',
            showAxes: false
        },

        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: {

            lineWidth: 0,
            minorGridLineWidth: 0,
            lineColor: 'transparent',

            labels: {
                enabled: false
            },
            minorTickLength: 0,
            tickLength: 0
        },

        yAxis: {
            lineWidth: 0,
            minorGridLineWidth: 0,
            gridLineColor: 'transparent',
            lineColor: 'transparent',
            labels: {
                enabled: false,
            },
            title:{
                text:''
            },
            minorTickLength: 0,
            tickLength: 0
        },

        tooltip: {
            useHTML: true,
            headerFormat: '<table>',
            pointFormat: '<tr><th colspan="2"><h3>{point.country}</h3></th></tr>' +
                '<tr><th>Fat intake:</th><td>{point.x}g</td></tr>' +
                '<tr><th>Sugar intake:</th><td>{point.y}g</td></tr>' +
                '<tr><th>Obesity (adults):</th><td>{point.z}%</td></tr>',
            footerFormat: '</table>',
            followPointer: true
        },

        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    format: '{point.name}'
                }
            }
        },

        series: [{
            data: [{
                x: 95,
                y: 95,
                z: 13.8,
                name: 'BE',
                country: 'Belgium'
            }, {
                x: 86.5,
               ...