Expenses chart component with Native JS

So I have to say I'm childishly proud of something that's probably really easy for a lot of you out there. But my Javascript skills getting better every day. Because I use nunjucks for these projects, my normal route would be to just iterate over this data with a foreach loop, but knowing I need to challenge myself on Javascript I tried to use native javascript instead.

Not knowing where to start led me to a solution of @elaineleung and this was really helpful. I never heard of things like createRange or createContextualFragment but these were really helpful. Thanx @elaineleung!

One thing I did a bit differently is the way a render the bars. While @elaineleung is appending it to each bar,

<div id="barsEl" class="spending__bars bars">
            <div class="bars__day"></div>
            <div class="bars__day"></div>
            <div class="bars__day"></div>
            <div class="bars__day"></div>
            <div class="bars__day"></div>
            <div class="bars__day"></div>
            <div class="bars__day"></div>
          </div>

I appended each bar inside its main container.

<div data-chart class="flex justify-between mt-[52px] items-end"></div>

I'm not sure if this is totally not the way to go but I thought it was a nice personal touch to some 'stolen' ideas ;).

I hope you like it and please give me some feedback on how to improve.