Limit labels number on Chart.js line chart
I want to reduce the number of label of my line chart "Only" when displaying on the small device. From the post above, the solution is like this;
xAxes: [{
type: 'time',
ticks: {
autoSkip: true,
maxTicksLimit: 12
}
}]
This is a good solution, but I want to keep all my 24 labels when showing on desktop (lg)
. I want to hide half of the labels when displaying on phone only (xs)
.
Here is one solution where we check if the the window size is less than 600px and return 12 else the tick limit is 24
xAxes: [{
type: 'time',
ticks: {
autoSkip: true,
maxTicksLimit: getTickLimit()
}
}]
function getTickLimit(){
return window.innerWidth<600? 12:24
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.