Dynamic expenses chart component solution

For the tooltip & bottom date indicator, I used CSS pseudo selector ::after & ::before. But I couldn't change the content of those in my script. Then I two div inside chart__bar for tooltip and bottom date indicator instead of the pseudo selector. Can I change ::after or ::before's content in js?

Secondly, What is the best way to size the chart bar? The spend amount can be bigger. I looked over the data & found the max amount is "amount": 52.36. Then I used it as 100% & size all the bars. What is the better way to do this?