GroupedBarChart moves up on render

[PedroCavaleiro]

I implemented the GroupedBarChart but sometimes the chart appears on the 0 other times it starts in the middle of the chart but I can't figure out why the bars sometime are in the middle of the chart .

Also If someone can figure out why the x axis labels aren't centered I would be greatly appreciated.

I have the following code to generate the chart data

private func buildKmsChart() {
        kmsComparerCharts = nil
        if !kmsComparer.querying.isEmpty { return }
        
        var datasets: [GroupedBarDataSet] = []
        let currentPeriodGrouping = GroupingData(
            title: SettingsManager.shared.kmsOption == .month ? "Last week".localized() : "Current week".localized(),
            colour: ColourStyle(colour: themeProvider.accentColor)
        )
        let previousPeriodGrouping = GroupingData(
            title: SettingsManager.shared.kmsOption == .month ? "Last year".localized() : "Last week".localized(),
            colour: ColourStyle(colour: themeProvider.accentColor.lighten())
        )
        
        
        let chartStyle = BarChartStyle(
            infoBoxPlacement       : .floating,
            infoBoxContentAlignment: .vertical,
            infoBoxBorderStyle     : .init(lineWidth: 0),
            markerType             : .none,
            xAxisLabelPosition     : .bottom,
            xAxisLabelColour       : Color.primary,
            yAxisNumberOfLabels: 7,
            baseline: .zero
         )
        
        if (SettingsManager.shared.kmsOption == .day) {
            (0..<6).forEach { index in
                let cPoint = GroupedBarDataPoint(value: kmsComparer.currentPeriod[index], group: currentPeriodGrouping)
                let pPoint = GroupedBarDataPoint(value: kmsComparer.previousPeriod[index], group: previousPeriodGrouping)
                let dataset = GroupedBarDataSet(dataPoints: [cPoint, pPoint], setTitle: "day-\(index)".localized())
                datasets.append(dataset)
            }
            kmsComparerCharts = GroupedBarChartData(
                dataSets: GroupedBarDataSets(dataSets: datasets),
                groups: [currentPeriodGrouping, previousPeriodGrouping],
                chartStyle: chartStyle
            )
        }
    }

And I have the following code to generate the chart

@ViewBuilder
    private func kmsComparerChart() -> some View {
        VStack(alignment: .leading, spacing: 2) {
            HStack(spacing: 40) {
                if let chart = kmsComparerCharts {
                    GroupedBarChart(chartData: chart, groupSpacing: 15)
                        .id(kmsComparerCharts?.id)
                        .touchOverlay(chartData: kmsComparerCharts!)
                        .floatingInfoBox(chartData: kmsComparerCharts!)
                        .yAxisGrid(chartData: kmsComparerCharts!)
                        .xAxisLabels(chartData: kmsComparerCharts!)
                        .yAxisLabels(chartData: kmsComparerCharts!)
                        .legends(chartData: kmsComparerCharts!, columns: [GridItem(.flexible()), GridItem(.flexible())], topPadding: 0)
                        .frame(height: 200)
                        .padding(.vertical, 25)
                }
            }
        }
            .padding(.horizontal, 20)
            .background(
                RoundedRectangle(cornerRadius: 15)
                    .fill(themeProvider.card)
                    .addShadow(radius: 5)
            )
            .padding(.horizontal, 20)
    }

ScreenRecording_04-29-2025.17-17-57_1.MP4