BarChart using barSpace = 0 problem (CG rounding issues)

[gal-orlanczyk]

Hi,

I am trying to create a graph for sleeping data like this:

So for this i am using bar stack bar chart with 3 types of colors and only 1 at a time gets a value, the problem is even though i am using barSpace = 0 i am getting little spaces between values when i have more than 10 entries, for example when i have 100 this is what i get:

Is there any way to avoid the small separating lines between each bar entry?

Thanks,
Gal

[liuxuan30]

The very thin white line is what I can reproduce with ChartsDemo; but the bigger spaces, seems like you don't have data there.
Anyway, if you are talking about the very small spaces, I'm not sure if this is related to the pixel and point is not aligned? What you guys think @danielgindi @petester42

Reproduce code in ChartsDemo BarChartViewController:

    for (int i = 0; i < count; i++)
    {
        [yVals addObject:[[BarChartDataEntry alloc] initWithValue:5 xIndex:i]];
    }

    BarChartDataSet *set1 = [[BarChartDataSet alloc] initWithYVals:yVals label:@"DataSet"];
    set1.barSpace = 0.0;

[gal-orlanczyk]

Yes i am talking about the small thin line, it looks like the rendering when having to draw a lot of bars is wrong. when there is small amount all is good, from 20+ the situation may defer.
when i give is bar space minus values for example: -0.2 this helps a little, but the problem is all the spacing gets smaller by 20% and again with large amount of bars 600 for example this also doesn't help.

Thanks for the help,
Gal

[danielgindi]

This seems to be caused by the way that Core Graphics work. It is indeed a bug- that I hope to find a way to avoid.

[liuxuan30]

Not sure how we can align the pixel perfectly, if that is the root cause.

[danielgindi]

Well, I plan to sit one day for a few hours and start sketching up a 2D renderer on the GPU. That will definitely solve this issue. As this is what Android does...

[kyo313]

So I need to wait, looking for your update

[philipengberg]

@liuxuan30 @danielgindi

It's an issue with all stacked bar charts it seems. If you look at the stacked bar chart demo and zoom in, there is a transparent 1 point gap between each color:

You have to zoom way in, but you can even see the vertical gridline zipping through right in the middle of the bar.

This is acceptable for the average use case. But I'm in a situation where I am simulating gradient transitions between colors, and in that case it ends up looking like this:

Not great, obviously. So I dug a bit deeper into the belly of the beast and it does indeed seem to be a rounding error, probably caused in the rectValuesToPixel function.

I also sort of fixed it. I realized that the bars are drawn top down, so if we just make the height of each bar a tiny bit taller, the issue is solved

context.fill(CGRect(x: barRect.origin.x, 
                    y: barRect.origin.y, 
                    width: barRect.size.width, 
                    height: barRect.size.height + 1))

Instead of adding an entire point, you could also use the pixel/point ratio for the current screen I guess.

I know it's a bit hacky, but I don't currently see another way around this.

This is the end result:

Much better 👍

What do you guys think? Is it a fix you would accept in a PR?

[liuxuan30]

if it's a bug, we definitely accept a PR. But I am not sure if height: barRect.size.height + 1 will solve it in any scenario?

[philipengberg]

It won't, but I couldn't figure out a better way to be honest 😞 And now I have to have the entire library cloned into the instead of using cocoapods just for this one tiny fix. Do you have any other ideas @liuxuan30?

[pmairoldi]

You can point cocoapods to your own fork if that is a problem you need fixed right away. As far as the fix goes what happens with 1x, 2x and 3x screens, the +1 might not work for all.