Chartjs-ChartJS Bubble Chart – Control The Radius Pixel Size Based on Fixed Height Chart To Prevent Overly Large Bubbles

by

0👍

Found a solution, here’s how I did it for anyone that needs to do this in the future!

Step #1: Scaled the "r" value by the max "r"

    // for dataPoints, make "r" so 100 is the max radius and everything else is scaled down
    const maxRadius = Math.max(...dataPoints.map((dataPoint: Dataset) => dataPoint.data[0].r));
    dataPoints.forEach((dataPoint: Dataset) => {
        dataPoint.data[0].r = Math.round(dataPoint.data[0].r / maxRadius * MAX_ALLOWED_BUBBLE_RADIUS);
    });

Step #2: I’m use datalabels w/ https://chartjs-plugin-datalabels.netlify.app/, so I needed to get the "non-scaled value" to include in the datalabel. To do this, I did the below in my options:

    plugins: {
        tooltip: {
            callbacks: {
                label: function(context: any) {
                    const label = `Group: ${context.dataset.label}`;
                    // need to get original count, since we scaled it down for the bubble chart
                    const countDatapoint = originalData.filter((dataObj: DataObject) => dataObj.label === context.dataset.label)[0].datapoint;
                    const rLabel = `Count: ${countDatapoint}`;
                    return [label, rLabel];
                }
            }
        },
    },

Leave a comment