Design comparison
Solution retrospective
I wasn't able to customize the text content of the tooltip :( Also I couldn't get it to show above the bar.
Community feedback
- @alexl8819Posted almost 2 years ago
Hi,
In your chart's configuration, there is a section for
plugins
where you can modify the tooltip. Check out the docs to see what options the tooltip contains and what can be modified. To give you a headstart, I'll show you an option or two off the top of my head that can be changed.plugins: { tooltip: { displayColors: false, // this value removes the colored box next to your value callbacks: { title: function () { return '' }, // we don't need a title, only the label label: function () { // put code here to render the label's desired value return "" } } }
There's more I'd look into (hint: the caret probably isn't needed) to style it closer to the design spec. You may also want to look into the
layout
property to see how to get the tooltip to appear above the chart. You can check that out here.Marked as helpful1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord