Bar Chart using CSS Grid

I would really appreciate some thoughts on this!! I struggled for quite some time with getting the dynamic bar chart right. I started using HTML canvas ( a big learning curve in itself) but then couldn't work out how to add event listeners to a canvas and know where was being clicked. Experimented with the mouse position for some time, but then converting mouse coords to a responsive HTML chart area was beyond me! Then decided to abandon that approach and try with a CSS grid. Which was better although again a struggle at times to write loops which used dynamic data without writing very inefficient code (i.e. having to spell out each individual day rather then some way of just looping once). And finally, I have been told that using element.style.gridRow = "50" for example is not good practice as it results in in-line styling. So I wanted to use element.classList.add("grid-position")` but failed because I couldn't therefore pass a variable number into the CSS class of .grid-position. Anyway, succeeded in the end but are there better approaches to draw bar-charts?

Thanks for any advice you can give!!!