Customized Tooltips in chart.js – Designing with Data

Опубликовано: 27 Февраль 2026
на канале: Jeff Thompson
9,389
158

Chart.js handles a lot of stuff for us but the default styling may not fit your project. One of the things we might want to change is how the tooltips – the info that pops up when we hover over a datapoint – appear. Changing the colors etc is really easy; changing the text that displays is a bit tricker, but you can use this example as a template for your own projects!

👩‍💻 https://editor.p5js.org/jeffThompson/...

ALL THE VIDEOS IN THIS UNIT
🎥    • Designing with Data: Adding Context to You...  

DATA SOURCE
💾 https://en.wikipedia.org/wiki/World_p...

CHALLENGES
❓ What other info and/or additions might you make to the tooltips here?

SEE ALSO
💡 https://www.chartjs.org/docs/latest/c...

💡 https://en.wikipedia.org/wiki/Decimal...
💡 https://chartjs-plugin-datalabels.net...