Chartjs-Chart JS – Bubble Chart is not getting rendered when loaded Dynamically

by

1👍

✅

I think the issue is that you need to convert the data into a format supported by bubble charts. For line and bar charts data can be integers or floats but for bubble charts they need to be Objects with a specified ‘x’, ‘y’ and ‘r’ (radius) value.

So for example to display a data in a bubble graph at point (1,4) with a radius of 10, you’ll specify it as:
{x: 1, y: 4, r: 10}

One way of doing this could be to call a helper function before creating a bubble chart or storing a copy of the data as an Object to be used only for bubble charts. It really depends on how you’ve set up your project and if you are concerned about the number of computations carried out or not. Hope this helps!

Documentation for Chart.js Bubble Chart Data Structure

Leave a comment