Bubble chart

author(s): 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/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Chart showing basic use of bubble series with a custom tooltip formatter.
        The chart uses plot lines to show safe intake levels for sugar and fat.
        Bubble charts are great for comparing three dimensions of data without
        relying on color or 3D charts.
    </p>
</figure>

CSS

body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        sans-serif;
    background: var(--highcharts-background-color);
    color: var(--highcharts-neutral-color-100);
}

.highcharts-figure,
.highcharts-data-table table {
    min-width: 310px;
    max-width: 800px;
    margin: 1em auto;
}

#container {
    height: 400px;
}

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

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid var(--highcharts-neutral-color-10, #e6e6e6);
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: var(--highcharts-neutral-color-60, #666);
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tbody tr:nth-child(even) {
    background: var(--highcharts-neutral-color-3, #f7f7f7);
}

.highcharts-description {
    background: light-dark(#f2f6f2, #323232);
    border-radius: 0 4px 4px 0;
    border-left: 2px solid light-dark(#1d6aff, #fff);
    font-size: 0.8rem;
    font-style: italic;
    padding: 8px 16px;
    margin: 2em 10px 1em;
}

.highcharts-tooltip table {
    padding-left: 5px;
}

.highcharts-tooltip th:not([colspan]) {
    font-weight: normal;
}

.highcharts-tooltip td {
    min-width: 45px;
    font-weight: bold;
    text-align: right;
}

TypeScript

Highcharts.chart('container', {

    dataTable: {
        columns: {
            CountryCode: [
                'BE', 'DE', 'FI', 'NL', 'SE', 'ES', 'FR', 'NO', 'UK', 'IT',
                'RU', 'US', 'HU', 'PT', 'NZ'
            ],
            CountryName: [
                'Belgium', 'Germany', 'Finland', 'Netherlands', 'Sweden',
                'Spain', 'France', 'Norway', 'United Kingdom', 'Italy',
                'Russia', 'United States', 'Hungary', 'Portugal', 'New Zealand'
            ],
            FatIntake: [
                95, 86.5, 80.8, 80.4, 80.3, 78.4, 74.2, 73.5, 71, 69.2, 68.6,
                65.5, 65.4, 63.4, 64
            ],
            SugarIntake: [
                95, 102.9, 91.5, 102.5, 86.1, 70.1, 68.5, 83.1, 93.2, 57.6, 20,
                126.4, 50.8, 51.8, 82.9
            ],
            Obesity: [
                13.8, 14.7, 15.8, 12, 11.8, 16.6, 14.5, 10, 24.7, 10.4, 16,
                35.3, 28.5, 15.4, 31.3
            ]
        }
    },
    chart: {
        type: 'bubble',
        plotBorderWidth: 1,
        plotBorderRadius: 5,
        zooming: {
            type: 'xy'
        }
    },

    legend: {
        enabled: false
    },

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

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

    accessibility: {
        point: {
            valueDescriptionFormat: '{index}. {point.name}, fat: {point.x}g, ' +
                'sugar: {point.y}g, obesity: {point.z}%.'
        }
    },

    xAxis: {
        gridLineWidth: 1,
        minPadding: 0.06,
        lineWidth: 3,
        title: {
            text: 'Daily fat intake'
        },
        labels: {
            format: '{value} gr'
        },
        plotLines: [{
            color: 'light-dark(#00b066, #007D49)',
            dashStyle: 'Dash',
            value:...