Grouped Vertical bar chart not showing bars when chart configured with big number of groups

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 => Please do not submit support request here

Current behavior For grouped vertical bar chart when when there is a lot of data - in my case around 37 groups with 3 sets - the bars disappear. Changing the view size (width) of the chart expands the size for each group but the rectangle in which the bars are drown is still small.

Expected behavior When changing the size of the chart bars should appear when the width is big enough to fit all bars.

Reproduction of the problem On demo page (https://swimlane.github.io/ngx-charts/#/ngx-charts/bar-vertical-2d) turn on real-time data. After a while bars will not be visible.

Changing the size of the chart will help initially but after a while it doesn’t matter how big the chart is bars won’t be there.

I’ve also created a plunker https://plnkr.co/edit/yPraBTyJgRkXK1zxvr8G

What is the motivation / use case for changing the behavior? It doesn’t work as I would expect it to.

Please tell us about your environment: Windows server 2012, WebStorm, NPM, .Net self hosted, Angular

• ngx-charts version: 7.1.1

• Angular version: 5.2.1

• Browser: Tested/Reproduced under IE11 and Chrome 65.0.3325.181

• Language: TypeScript 2.5.3

[asantiago323]

Is it possible to get the bar-vertical-2d chart to look like bar-vertical when using a lot of data? I wanted to group dates by month, but if some months have more data items in the series than others, it looks odd, and even setting the [barPadding] to 1 or 2 was not helping.

I would much rather it look like this, but with the month grouping instead of all the dates.

[asantiago323]

This is what i get if having more than 4 months, even with groupPadding altered.

Here is some sample data: `export var multi = [ { “name”: “October”, “series”: [ { “name”: “10/1/2020”, “value”: 7300000 }, { “name”: “10/31/2020”, “value”: 8940000 } ] },

{ “name”: “November”, “series”: [ { “name”: “11/1/2020”, “value”: 7870000 }, { “name”: “11/2/2020”, “value”: 8270000 }, { “name”: “11/3/2020”, “value”: 8270000 }, { “name”: “11/4/2020”, “value”: 8270000 }, { “name”: “11/5/2020”, “value”: 8270000 }, { “name”: “11/6/2020”, “value”: 8270000 }, { “name”: “11/7/2020”, “value”: 8270000 }, { “name”: “11/8/2020”, “value”: 8270000 }, { “name”: “11/9/2020”, “value”: 8270000 }, { “name”: “11/10/2020”, “value”: 8270000 }, { “name”: “11/11/2020”, “value”: 8270000 }, { “name”: “11/12/2020”, “value”: 8270000 }, { “name”: “11/13/2020”, “value”: 8270000 }, { “name”: “11/14/2020”, “value”: 8270000 }, { “name”: “11/15/2020”, “value”: 7870000 }, { “name”: “11/16/2020”, “value”: 8270000 }, { “name”: “11/17/2020”, “value”: 8270000 }, { “name”: “11/18/2020”, “value”: 8270000 }, { “name”: “11/19/2020”, “value”: 8270000 }, { “name”: “11/20/2020”, “value”: 8270000 }, { “name”: “11/21/2020”, “value”: 8270000 }, { “name”: “11/22/2020”, “value”: 8270000 }, { “name”: “11/23/2020”, “value”: 8270000 }, { “name”: “11/24/2020”, “value”: 8270000 }, { “name”: “11/25/2020”, “value”: 8270000 }, { “name”: “11/26/2020”, “value”: 8270000 }, { “name”: “11/29/2020”, “value”: 8270000 }, { “name”: “11/30/2020”, “value”: 8270000 } ] },

{ “name”: “December”, “series”: [ { “name”: “12/26/2020”, “value”: 5000002 }, { “name”: “11/27/2020”, “value”: 5800000 }, { “name”: “12/28/2020”, “value”: 5000002 }, { “name”: “11/29/2020”, “value”: 5800000 }, { “name”: “12/30/2020”, “value”: 5000002 }, { “name”: “11/31/2020”, “value”: 5800000 } ] }, { “name”: “January”, “series”: [ { “name”: “12/26/2020”, “value”: 5000002 }, { “name”: “11/27/2020”, “value”: 5800000 }, { “name”: “12/28/2020”, “value”: 5000002 }, { “name”: “11/29/2020”, “value”: 5800000 }, { “name”: “12/30/2020”, “value”: 5000002 }, { “name”: “11/31/2020”, “value”: 5800000 } ] } ];

`