Expenses Chart Component using Vue, Chart JS, Pug & SCSS

Community feedback

• 

  madhaus•1,040

  @festsnusaPosted almost 2 years ago

  Hello everyone! It's my first time using Vue and ChartJS. So, it's quite obvious that my solution is far from the initial design. I have a few questions to the community:

  • First of all, as you can see, the bottom corners of columns are not rounded. I used borderRadius: 10, but ChartJS only rounds the top corners;
  • Second, I didn't find any information to how to hide the separators between the columns;
  • Lastly, if you hover any column, it shows digits without the dollar sign.

  If anyone knows how to fix these problems, please be sure to leave the comment.

  Thanks in advance!

  0

  ---

  

  Kitketovsky•45

  @KitketovskyPosted almost 2 years ago

  @festsnusa hey, I haven't used ChartsJS library, but Recharts in React, but I don't think they are totally different. There might be an option in ChartJS API to assign a custom classname to your columns, do that and in CSS you need to write border radius of your choice to overwrite what ChartJS assigns. I think the library cuts the borders at the bottom, because usually you don't see them quite often, they are usually cut. If there's no option to assign your columns with a classname, you can inspect the graphs in your browser, find any column and what its classname is. After that, in wrapper you can write your rule for borders and thah should be it.

  About the dollar sign. There also should be API for changing what your tooltip can show. Usually it's a function with initial argument that returns a string. So you need return that value of the graph plus the dollar sign.

  0