Expense Chart Using ChartJS

Community feedback

• 

  Anton•515

  @antaryaPosted about 2 years ago

  Hi 👋,

  Good work on ChartJS usage 🚀.

  I have a couple of suggestions/improvements:

  HTML

  [1. Any reason you load bootstrap.grid.css and a bunch of fonts that are not used anywhere?

  [2. I think headings are misused. For inspiration, look at other solutions, e.g. https://www.frontendmentor.io/solutions/responsive-bar-chart-component-with-json-data-fetching-b2LJ5eTGIX.

  [3. There is a typo on line: <div class="container" width="100px" ,height="100px"> you need to remove comma. Also, I do not think setting width and height is valid; you can specify it as style but not attribute.

  JS

  [4. You have a typo on this line events: ["mousmove", "click"],, it should be mousemove; otherwise hover effect does not work. Do you have any specific reason to limit events?

  [5. To match the design, you can remove the horizontal line below the bar element:

    x: {
      grid: {
        display: false,
        // Add this line to remove the bottom line
        drawBorder: false,
      },
    }
  

  [6. The y-axis configuration is set twice, which means only a second try will be preserved.

  {
    scales: {
      ...
      y: { // this will be lost
        grid: {
          display:false
        }
      },
      y: { // this will stay
        display :false
      }
    }
  }
  

  You can specify all options like this:

    y: {
      display :false,
      grid: {
        display:false,
      }
    },
  

  [7. To make sure border-radius is set everywhere, you can use the borderSkipped option:

    options: {
      borderSkipped: false,
      ...
    }
  

  Check API how it works https://www.chartjs.org/docs/latest/charts/bar.html#borderskipped

  General

  [8. To name your classes consistently, check BEM, and to structure it in a reusable way, take a look at CUBE CSS. Check these resources for additional information:

  • https://getbem.com/naming/
  • https://cube.fyi/
  • https://www.youtube.com/watch?v=NanhQvnvbR8

  [9. Use CSS reset to have a good starting point, e.g. https://piccalil.li/blog/a-modern-css-reset/.

  I hope this will be helpful.

  Keep up the good work 🚀. Cheers!

  Marked as helpful

  1

  ---

  

  Vishwajeet Barve•240

  @VishwajeetBarvePosted about 2 years ago

  @antarya Thanks for the suggestion and in-depth analysis especially of the ChartJS as I'm new to it. I will surely look into it and make the necessary changes and improvements needed.

  0