Design comparison
SolutionDesign
Solution retrospective
I used Chart.js and had difficulty getting function to border-radius of bars in the chart as well as updating tooltip info upon hover. Feedback welcome on any improvements as I'm early on self-taught and trying to improve skills.
Community feedback
- @neenrevaPosted over 2 years ago
Just had fun with ChartJS myself. The docs could probably be better but I found some things you might be looking for in particular :
let myChart = new Chart("myChart", { type: "bar", data: { }, options: { elements: { bar: { borderRadius: 'your value here', borderSkipped: false, } } }
Tooltips are a little trickier. I played with these in the console till I got what I wanted.
let myChart = new Chart("myChart", { type: "bar", data: { }, options: { plugins: { tooltip: { callbacks: { title: function (context) { context = "$" + context[0].formattedValue; return context; }, label: function (context) { context = ""; return context; }, }, } }
My code here if you want some specific references to how I handled it. Hope this helps
0
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