Small gap between vertical stack bars

[soothran]

I'm submitting a ... (check one with "x")

• [x] bug report - search github for a similar issue or PR before submitting
• [ ] feature request
• [ ] support request - use StackOverflow (add the ngx-charts tag) or the gitter chat al support questions

In the vertical stacked bar chart a very small but noticeable gap is there between two bars

I need to display the chart with no gap between vertical bars It seems the sum of individual heights of stacked bars is less than the height of wrapper element. If I'm not wrong, the first bar's height in a single stack is taking the absolute value of its actual height. But the second bar is taking the real value.

Reproduction of the problem

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• ngx-charts version: x.x.x

• Angular version: x.x.x

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[bellagamba]

Same issue here:

[simeyla]

It looks especially bad because it isn't consistent from one bar to the next :-( This is kind of a border line (pun intended) deal breaker type issue because it looks so bad. I'd be better off just drawing a bunch of DIVs myself on top of each other :-/

Wondered if it was related to hi-dpi screens, but my screen is at 200% so I doubt it.

If I set the stroke to the same as the fill color it's an adequate solution but I don't know how to actually do that in the code.

[pathakparth]

Facing the same issue with my current project. Any fix/work around/solutions yet ?

[zhangxin511]

I have a PR in https://github.com/swimlane/ngx-charts/pull/1086

[richard-grosjean]

Same issue here:

@zhangxin511 's addition didn't seem to help for me

[bene-we]

Same for me, thought it was because of the different colors I used. After removing the colorScheme the problem appears even stronger:

Adding a stroke to the elements as mentioned by @simeyla helps covering the gaps mostly (image below, left bar with stroke in the same color), though I am not able to implement that using the random colorScheme.

I also recognized that the gap size seems to change with the height of the chart itself.

Any workaround for this?

[hill]

1469 appears to be a solution to this. Could this PR get merged?

[gregkaczan]

so 5 years later and still here..

see You all in 2027 :D