Space Between Bars (Issue with many Bars)

[tfeige91]

Hi,

first of all: Great Library! It's by far the most flexible out there in pure SwiftUI!

I ran into one issue with the bar chart, that is hopefully easy to fix although I didn't find the right place, yet.

If you have many data points the bars extend the space of the diagram. You can transform the bars as such by giving it a bar width <1 but that leads to huge spaces between the bars (of course). Is there a way to make the entire bars "thinner"?

Examples

Not so many bars

Kind regards!

[willdale]

While you don't have any labels showing, I think the issue might be in the .xAxisLabels. If you remove the modifier or change BarChartData -> chartStyle -> xAxisLabelsFrom to .chartData() then the issue should hopefully be resolve.

Thanks!

EDIT:

[tfeige91]

Wow many thanks! It worked: I changed xAxisLabelsFrom to .chartData().

[tfeige91]

With 96 Bars I now run into expected performance issues. Is there a way to call the .drawingGroup modifier to make use of Metal?

[willdale]

Glad its working.

Are these performace issues in the simulatior or on a real device; if on a device, which model?

[tfeige91]

I have them in the simulator and on the iPhone 12 mini. Not every time the view loads though.

[tfeige91]

Maybe it was worth adding the modifier if the data exceeds a certain number of elements?

[willdale]

At what point in the view hierarchy do you think it should be attached? Could you place it within your view?

[tfeige91]

I only have a Zstack with a RoundedRectangle and then the Chart on top -> Basic CardView. I tried adding it on every point in my views, but it didn't change the behavior.

`    
    `var` body: some View {
        ZStack{
            RoundedRectangle(cornerRadius: /*@START_MENU_TOKEN@*/25.0/*@END_MENU_TOKEN@*/)
                .fill(vm.backgroundColor)
            if (chartData != nil) {
                BarChart(chartData: vm.chartData)
                    .touchOverlay(chartData: chartData!)
                    .yAxisGrid(chartData: chartData!)
                    .xAxisLabels(chartData: chartData!)
                    .yAxisLabels(chartData: chartData!)
                    .headerBox(chartData: chartData!)
        //            .id(data.id)

                    .padding(20)
            }
        }
        .frame(minWidth: 150, maxWidth: .infinity, minHeight: 150, idealHeight: 300, maxHeight: 300, alignment: .center)
        .padding()
        .onAppear(){
            filter()
        }

    }`

Maybe one could add it to this ForEach? But I am really no experienced developer, this is just a guess.

[willdale]

Out of interest, what happens in the .onAppear? I've seen other issues where the animation gets a bit glitchy if the data is changed in .onAppear. See https://github.com/willdale/SwiftUICharts/issues/57#issuecomment-823856041.

As far as I know, adding .drawingGroup() to your ZStack should have pretty much the same effect as adding it in the library.

[tfeige91]

🙈 the onAppear was legacy stuff that I just forgot to remove. I did it now, but it's not changing anything. I now only initialize the viewModel that calls a function in its init to create the datapoints. But this didn't lead to performance improvements.

Yeah I thought so, too but it didn't change anything at all. Maybe the problem is in the function. Anyway thanks a lot for your support!