I am working on an Angular project and I would like to incorporate a barchart using ChartJS. The data for this chart can vary in size, sometimes being very large.
One issue I have encountered is that when the number of data points is large, the labels overlap each other as shown in this image: https://i.sstatic.net/bVhaQ.png
I am seeking advice on how to automatically adjust the spacing to ensure the labels are displayed correctly?
Here is a snippet of the source code:
// Bar chart mock data
barChartOptions:any = {
scaleShowVerticalLines: true,
responsive: true
};
barChartLabels:string[] = ['2018-10-02 15:26:41', ...];
barChartType:string = 'horizontalBar';
barChartLegend:boolean = true;
barChartData:any[] = [{data: data, label: 'Kilometre per Litre'}];
html
<div style="display: block">
<canvas baseChart id="mpgChart"
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[chartType]="barChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
scss
#mpgChart{
height: 100%;
width: 100%;
}