Highcharts.js

Le résultat

En pratique

Import des librairies


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

Préparation des données

Pour construire le graphe, si il un dictionnaire avec comme clé x, y, z et un name.


    const regions = ["East asia pacific", "Europe central asia", 
                     "America", "Middle east north africa", "South asia", "Sub saharan africa"];
            
    var series = [];
    var renameObject = [];
    var temp;
    for (const element of regions) {
        temp = jsonData.filter(function(s) {
            return s.six_regions === element
        });   
        renameObject = [];
        for (var i = 0; i < temp.length; i++) {
            renameObject.push({
                x:   temp[i].income_2021,
                y: temp[i].live_expectancy_2021,
                z: temp[i].pop_total_2021,
                name: temp[i].country, 
                region: element
            });
        }

        series.push({
            data: renameObject,
            name: element
        });
    }

Création du graphe


    Highcharts.chart('chart_div', {
        chart: {
            type: 'bubble',
            plotBorderWidth: 1,
            zoomType: 'xy'
        },

        legend: {
            enabled: true
        },

        title: {
            text: 'World health chart (2021)'
        },

        subtitle: {
            text: 'Source: Gapminder'
        },

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

        xAxis: {
            gridLineWidth: 1,
            title: {
                text: 'Income'
            },
            labels: {
                format: '{value}'
            },
        },

        yAxis: {
            startOnTick: false,
            endOnTick: false,
            title: {
                text: 'Life expectancy'
            },
            labels: {
                format: '{value}'
            },
            maxPadding: 0.2,
        },

        tooltip: {
            useHTML: true,
            headerFormat: '',
            pointFormat: '' +
                '' +
                '' +
                '' +
                '',
            footerFormat: '
{point.name}
Icome:{point.x}g
Life expectancy:{point.y}
Population:{point.z}
Region:{point.region}
',
            followPointer: true
        },

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

        series: series

    });

Quelques liens