I have repetitive data on the x-axis as in the screenshot I shared for my line chart. When I print to the console in xAxis callback, the result is as follows. How can I hide them?
x: {
ticks: {
display: true,
autoSkip: false,
callback: function(val, index, dates) {
console.log({dates})
return this.getLabelForValue(val);
},
}
},
0: {value: 0, label: 'Mar 02 2023', $context: {…}}
1: {value: 1, label: 'Mar 01 2023', $context: {…}}
2: {value: 2, label: 'Mar 01 2023', $context: {…}}
3: {value: 3, label: 'Mar 01 2023', $context: {…}}
4: {value: 4, label: 'Mar 01 2023', $context: {…}}
5: {value: 5, label: 'Mar 01 2023', $context: {…}}
6: {value: 6, label: 'Mar 01 2023', $context: {…}}
7: {value: 7, label: 'Feb 28 2023', $context: {…}}
8: {value: 8, label: 'Feb 28 2023', $context: {…}}
9: {value: 9, label: 'Feb 28 2023', $context: {…}}
10: {value: 10, label: 'Feb 28 2023', $context: {…}}
11: {value: 11, label: 'Feb 28 2023', $context: {…}}
12: {value: 12, label: 'Feb 28 2023', $context: {…}}
13: {value: 13, label: 'Feb 28 2023', $context: {…}}
14: {value: 14, label: 'Feb 28 2023', $context: {…}}
15: {value: 15, label: 'Feb 28 2023', $context: {…}}
16: {value: 16, label: 'Feb 28 2023', $context: {…}}
17: {value: 17, label: 'Feb 28 2023', $context: {…}}
18: {value: 18, label: 'Feb 28 2023', $context: {…}}
19: {value: 19, label: 'Feb 28 2023', $context: {…}}
20: {value: 20, label: 'Feb 28 2023', $context: {…}}
21: {value: 21, label: 'Feb 27 2023', $context: {…}}
22: {value: 22, label: 'Feb 27 2023', $context: {…}}
23: {value: 23, label: 'Feb 27 2023', $context: {…}}
24: {value: 24, label: 'Feb 27 2023', $context: {…}}
25: {value: 25, label: 'Feb 27 2023', $context: {…}}
26: {value: 26, label: 'Feb 27 2023', $context: {…}}
27: {value: 27, label: 'Feb 26 2023', $context: {…}}
28: {value: 28, label: 'Feb 26 2023', $context: {…}}
(https://i.sstatic.net/FKxH1.png)
I've tried but I couldn't do it
You may use
callback: function(val, index, dates) {
if(labels[index-1]===labels[index]){
return '';
}
return this.getLabelForValue(val);
}
in the x axis ticks callback to only keep the first occurrence of a repeated tick label (fiddle link).
If the (user defined) array of labels is not directly accessible, it can be retrieved from the chart, e.g., as this.chart.data.labels.
To make things clearer, you may want to keep the first and last occurrences of a label, in which case you may use the condition
if(labels[index-1]===labels[index] && labels[index+1]===labels[index]){
return '.';
}