ngx-charts-bar-vertical: what to do when there are too many elements and bars are not drew

Question

Using ngx-charts, and particularly the vertical bar chart, I have found that there's a limit of elements over which the bars won't be displayed.

I believe the limit is related to the chart's available width and the number of elements, which of course makes sense.

I replicated the 'issue' modifying the official example (source data is inside data.ts):

n = limit elements: plunkr (bars present)
n+1 elements: plunkr (bars gone)

My question is: is there a way to prevent this, like adding a scrollbar when needed, or better?

If not, is there an event/log/hook I can use to at least detect it's happening and hide the chart/notify the user?

It may be interesting to note that when the bars disappear, also their g > path nodes disappear from the DOM.

I'm also pasting here its angular template code because of the 'plunkr must be accompanied by code' restriction, maybe it helps:

<ngx-charts-bar-vertical
  [view]="view"
  [scheme]="colorScheme"
  [results]="single"
  [gradient]="gradient"
  [xAxis]="showXAxis"
  [yAxis]="showYAxis"
  [legend]="showLegend"
  [showXAxisLabel]="showXAxisLabel"
  [showYAxisLabel]="showYAxisLabel"
  [xAxisLabel]="xAxisLabel"
  [yAxisLabel]="yAxisLabel"
  (select)="onSelect($event)">
</ngx-charts-bar-vertical>

I ended up detecting which was the min width/n ratio to draw a line, and grouping data if the ratio was below that. Felt guilty. — qwertoyo, Oct 24 '18 at 19:08

score 4 · Accepted Answer · answered Oct 30 '18 at 16:07

4

You can use the barPadding input to set the padding between bars (in pixels) Example:

[barPadding]="2"

answered Oct 30 '18 at 16:07

Marjan

1,378
1
14
21

that will simply reduce that 'n' which is the max num of lines that could be drawn in a fixed width, correct? Won't solve the issue – qwertoyo Nov 23 '18 at 12:49
1

No. The reason the bars disappear is they become very thin due to the padding being enforced on them. If you decrease the padding, the bars will be thicker and visible. All of the bars should always be added to the DOM. – Marjan Dec 06 '18 at 15:44
can this value be given in % (percentage)? – Sisir Nov 06 '21 at 17:43

score 1 · Answer 2 · answered May 01 '20 at 11:24

1

You can achieve this by changing values of barPadding (default: 8) and groupPadding (default: 16).

Ref: https://swimlane.gitbook.io/ngx-charts/examples/bar-charts/vertical-bar-chart

answered May 01 '20 at 11:24

Silambarasan R

1,346
15
22

1

Thanks! Now I only need a DeLorean DMC-12 and I'm done :) – qwertoyo May 06 '20 at 16:15

ngx-charts-bar-vertical: what to do when there are too many elements and bars are not drew

2 Answers2