0
142
ViewsChart.js timeseries x ticks overlapping due to weekend
I use Chart.js to plot a line chart. My x axis is a timeseries. However, I have ticks overlapping due to weekend data.
Is there any way to avoid overlapping ticks? I used "autoskip: true" but it doesn't seem to work.
Here's how my configs look like:
x: {
parsing: false,
type: "timeseries",
time: {
displayFormats: {
second: "HH:mm",
minute: "HH:mm",
hour: "HH:mm",
day: "MMM d",
},
tooltipFormat: "d MMM HH:mm",
},
grid: {
display: false,
},
ticks: {
autoskip: true,
},
},
And this is how the overlapping looks like:
·
Juan Pablo Isaza
1 answers
Answer question0
You can achieve what you're looking for by writing a callback function that checks if the value is a weekend day
new Date(Date.parse(value)).getDay() == 1 || new Date(Date.parse(value)).getDay() == 2
If it is we just don't return it. Otherwise we return the value without changes.
This is how your config should look like:
x:{
type: 'timeseries'
time:{
unit:'day',
},
ticks:{
callback: function(value){
//if weekend dont return the tick label
if(new Date(Date.parse(value)).getDay() == 1 || new Date(Date.parse(value)).getDay() == 2 )
return
return value
}
}
}
·
Juan Pablo Isaza
Report
Answer question