ng2-charts (chart.js) bar chart columns fail to render above a certain width

Viewed 364

First off, the issue occurs in an Angular 8 project using the ng2-charts library (https://valor-software.com/ng2-charts/), as far as I know, that project is a wrapper for chart.js.

Currently I have a bar chart where I want to render hundreds of columns. It works well at the beginning, however columns fail to show up above a certain index.

enter image description here

I have a tooltip set up for the columns, the tooltip shows up when I hover where the column should be, meaning the column is actually there, we just can't see it. The issue is not that the value is so much smaller than the previous one either, the columns are ordered based on their values and the height of the first invisible column should be around the same as the previous one.

The dataset doesn't seem to be the cause of the issue either. I reordered my data based on the names instead of the values and even then, only the first 183 columns showed up.

My HTML:

<div class="chart-wrapper"
     [ngStyle]="{width: 150 + (data.length * 35) + 'px'}">
    <canvas baseChart
            [datasets]="barCharDataset"
            [labels]="barChartLabels"
            [legend]="barChartLegend"
            [options]="barChartOptions"
            [chartType]="barChartType"
            (chartClick)="chartClicked($event)"></canvas>
</div>

The width of the wrapper (and the chart) is based on the number of columns I want to show. If I decrease the multiplier from 35pixels to let's say 20, then suddenly all (currently) 300 columns are rendered, but the chart itself doesn't look as good. If I set it to 25, then the last couple of columns still don't show up. Since the number of columns I want to show will increase later on, setting the width to something that only works now is not acceptable for me.

Chart configuration:

this.barChartOptions = {
  animation: {
     duration: 0
  },
  hover: {
     animationDuration: 0
  },
  responsiveAnimationDuration: 0, // animation duration after a resize
  responsive: true,
  maintainAspectRatio: false
}

Maybe the solution is as simple as setting a parameter, but I couldn't find one that seemed relevant and changing it worked (tried modifying barThickness and maxBarThickness among others with no luck).

Edit: StackBlitz example available: https://stackblitz.com/edit/angular-wrvgme

0 Answers
Related