Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Expenses-Chart

Jarrod 50

@cannonjarrod19

Desktop design screenshot for the Expenses chart component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

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

James 390

@neenreva

Posted

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 GitHub
Discord logo

Join 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