Skip to Main Content
Learn Chart.js
book

Learn Chart.js

by Helder da Rocha
February 2019
Beginner to intermediate content levelBeginner to intermediate
284 pages
6h 20m
English
Packt Publishing
Content preview from 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 ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

Pro D3.js: Use D3.js to Create Maintainable, Modular, and Testable Charts

Pro D3.js: Use D3.js to Create Maintainable, Modular, and Testable Charts

Marcos Iglesias

Publisher Resources

ISBN: 9781789342482OtherErrata PagePurchase Link