Group Bar Chart Help

[amf-paulo-airship]

Its impossible to use the components now. Its so complex and non sense. The examples make no sense and are incomplete which make even harder to understand this "great" improvement XL.
How can I create a simple group bar chart.

PS: You guys destroyed a great library.

[keithluchtel]

@amf-paulo-airship Here is a bar group example: https://github.com/FormidableLabs/victory-native-xl/blob/main/example/app/bar-group.tsx

PS: The old Victory library still exists. Just point to the correct package version.

[amf-paulo-airship]

Thank you guys, I was frustrated with the completely re-design, ended up finding my self. I have some level of complexity for my charts , they are dynamic, I could do almost everything. Only thing I am not finding a way to do is change x axle dynamically, I'll elaborate on it:

I have a class attendance report that compare years and months, when selected a month chart will show weekdays average as a bar-group and each bar on the group is a year. Everything works fine , however when I try remove days of week, to instead show all , show the ones I select. I could not find a way to do it. I had almost working , but the chat creates X axis values by it self which messes everything up, my last attempt winch I almost got it right was painting the disabled weekday in gray.

you can see that for drawing the bars in the group was super easy to drawing just the ones I want based on my year selection:

item.enabled && <BarGroup.Bar points={points[year${item.label}]} color={item.lineColor} key={index} />

I thought I could do the same for the group using points, or any other property in the function... But I fail.

could some one give me an idea how to do this ?

You can see in my screenshot that Monday and Tuesday are disable just for illustration but I could not accomplish the task. Chart should be showing the whole Monday and Tuesday Group in gray or just not rendering it. Also I did not post all my logic for brevity reasons. There is a lot of dynamic bar generation on this logic but everything works great, just lacking this last logic. I can navigate months and hide/show years.... Last frontier is hiding and showing days of week

here is how the code looks like:

 <CartesianChart
                data={chartData}
                //@ts-ignore
                xKey="weekDay"
                yKeys={legendData?.map(item => item.field) as any}
                domainPadding={{ left: 50, right: 50, top: 50 }}
                axisOptions={{
                    font,
                    formatXLabel(value) {
                        return daysOfWeek[Number(value)];
                    },
                }}
            >
                {({ points, chartBounds }) => {
                    return (
                        // @ts-ignore
                        <BarGroup

                            chartBounds={chartBounds}
                            betweenGroupPadding={0.3}
                            withinGroupPadding={0.1}
                            roundedCorners={{
                                topLeft: 5,
                                topRight: 5,
                            }}
                        >

                            {legendData?.map((item, index) => {
                                return (
                                    //@ts-ignore
                                    item.enabled && <BarGroup.Bar points={points[`year${item.label}`]} color={item.lineColor} key={index} />
                                );
                            })}

                        </BarGroup>
                    )
                }}
            </CartesianChart>

here is how my data looks like:
[{"month": 7, "weekDay": 0, "year2019": 0, "year2020": 37, "year2021": 90, "year2022": 115, "year2023": 161, "year2024": 0}, {"month": 7, "weekDay": 1, "year2019": 0, "year2020": 32, "year2021": 83, "year2022": 140, "year2023": 123, "year2024": 0}, {"month": 7, "weekDay": 2, "year2019": 0, "year2020": 30, "year2021": 85, "year2022": 147, "year2023": 148, "year2024": 0}, {"month": 7, "weekDay": 3, "year2019": 0, "year2020": 33, "year2021": 79, "year2022": 130, "year2023": 119, "year2024": 0}, {"month": 7, "weekDay": 4, "year2019": 0, "year2020": 26, "year2021": 63, "year2022": 114, "year2023": 113, "year2024": 0}, {"month": 7, "weekDay": 5, "year2019": 0, "year2020": 6, "year2021": 11, "year2022": 20, "year2023": 27, "year2024": 0}, {"month": 7, "weekDay": 6, "year2019": 0, "year2020": 3, "year2021": 48, "year2022": 95, "year2023": 107, "year2024": 0}]