I’m trying to create a stock chart (with Chart.js v4) similar to the ones you see on Google. My goal is to display only intervals on the x-axis, rather than showing labels for each day. I managed to do this by setting maxTicksLimit
. But my chart ends up with two x-axes: one that shows all the data labels, and another that correctly shows only the intervals. How to achieve something similar to Google’s stock chart ?
import { ChartData, ChartType, ChartOptions } from 'chart.js';
public lineChartOptions: ChartOptions = {
scales: {
xAxis: {
ticks: {
autoSkip: true,
maxTicksLimit: 4,
}
}
},
}
public stockPrices: ChartData = {
labels: [
'01-01-2020', '02-01-2020', '03-01-2020', '04-01-2020', '05-01-2020',
'06-01-2020', '07-01-2020', '08-01-2020', '09-01-2020', '10-01-2020',
'11-01-2020', '12-01-2020', '13-01-2020', '14-01-2020', '15-01-2020',
'16-01-2020', '17-01-2020', '18-01-2020', '19-01-2020', '20-01-2020',
'21-01-2020', '22-01-2020', '23-01-2020', '24-01-2020', '25-01-2020',
'26-01-2020', '27-01-2020', '28-01-2020', '29-01-2020', '30-01-2020', '31-01-2020'
],
datasets: [{
label: 'Stock Prices',
data: [
100, 110, 105, 120, 118, 125, 130, 135, 128, 140,
142, 138, 145, 150, 148, 152, 155, 160, 158, 165,
170, 172, 168, 175, 178, 182, 180, 185, 190, 195
],
backgroundColor: '#debdd8',
borderColor: '#a04c93',
borderWidth: 1
}]
};
Here is my current state of Chart looks like, and what I am trying to achieve