Bubble charts

Bubble charts are just like scatter charts, but they can display an extra variable in the diameter of the point (or shape). The type property should be bubble. Although they share the same dataset properties as scatter charts, most of them can receive callbacks in bubble charts, which allow a higher degree of interactivity. The data structure for bubble charts contains three properties, as follows:

{x: number, y: number, r: number}

The properties x and y are scaled automatically when the chart is scaled. The r property is the raw radius of the circle in pixels and is not scaled (but you can configure a callback if you need to scale it).

The following code (ScatterBubble/bubble-1.html) creates a simple bubble chart with a single ...

Get Learn Chart.js now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.