Customized Tooltips in chart.js – Designing with Data
Channel: Jeff Thompson
Date: 24/03/2021

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/sketches/4Sa8BMuJO

ALL THE VIDEOS IN THIS UNIT
🎥 https://youtube.com/playlist?list=PLsGCUnpinsDkzLls8TCm0BtDUMfH2poqU

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

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

SEE ALSO
💡 https://www.chartjs.org/docs/latest/configuration/tooltip.html

💡 https://en.wikipedia.org/wiki/Decimal_separator#Digit_grouping
💡 https://chartjs-plugin-datalabels.netlify.app