Learn Chart.js

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