How to design a monthly status chart in react using typescript

I’m trying to create a monthly status chart like the following, which the props should take a list of monthly data(consecutive data for each month, if no data for this month, it should be 0 or null) for different categories. And a date range exactly match the monthly data list.
enter image description here
I looked for several several library, like MUI, but they don’t have any thing similiar to what I want to accomplish, so I’, thinking to build from scratch, but I have difficult on how to design this chart.
I’m thinking use HStack for each category’s monthly data, and align them vertically with VStack, however, the grid underneath would be difficult to construct this way, is there any better suggestion now how to design this kind of chart?