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.
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
Hi everyone š
This challenge was gruelling and rewarding in equal measures.
I took it as an opportunity to implement and learn the following:
I've had a few thoughts on where I can improve the project further over the next few weeks:
Any feedback that could help me to improve would be very welcome!
Happy coding š¤
Nice work as always. When you mentioned the formatting improvements for the future the toLocaleString() method comes to mind. I'll leave an MDN link and let you figure out if it's useful.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString
I think the report is mostly due to the live link needing to be fixed. In the Github repository hit the settings tab and find the 'pages' section. Select your main branch and save. Resubmit the new live link in the challenge and refresh the view.
Overall this renders pretty well. The few things I see are the drop shadow on the payment button and the alignment of the card. The accessibility issues are something you'll have to add in the html. Semantic html is something I'm new to as well but you'll quickly see that it helps organize and ends up being more readable for others looking at your code. It will also help with SEO and users that may use screen readers. I'll leave a link that is a quick reference.
https://www.w3schools.com/html/html5_semantic_elements.asp
Very good overall. Take this for what it's worth because I'm a noob myself. I noticed that some of your colors were off. Are you getting the values they give in the style-guide? If not those will bring this to almost perfect. Keep it up!
