Bubble Chart

How to create a bubble in chart JS.

In this post we will cover how to create a bubble chart. Creating a bubble chart in Chart JS is a bit tricky due to the 3 datapoints but once you see it in the video you will quickly grasp the concept.

Bubble Chart in Chart JS

The video covers the bubble chart a chart that was introduced in Chart JS 2. The bubble chart is quite similar to a scatter chart in Chart JS. Where you have to specify the datapoint x, y and also the r value. The “R” stands for the radius and indicates how big the bubble would be draw in pixels. The larger the bubble the more importance it has.

Common issue with the bubble chart

A common issue with the bubble chart is the size of the bubbles in the corner of the chart. Often the bubbles tend to be cut or certain parts are clipped due to the bubble which is bigger than the canvas element. We will cover this common issue by using the clip namespace and the layout padding namespace in the options.