'autoskip' feature in chartjs, doesn't seem to be working.
See original GitHub issueNote: I have posted in stackoverflow already. Will close this if resolved on that side of things. https://stackoverflow.com/questions/58526217/how-do-i-implement-the-autoskip-feature-in-chartjs
I am trying to use the autoSkip feature found here in the chart.js documentation:
https://www.chartjs.org/docs/latest/axes/cartesian/?h=autoskip
The issue I am having is my x-axes labels are overlapping (see above example). Everything I have read says this autoSkip feature should automatically skip overlapping labels. However, when setting this to both true or false, nothing seems to change in my chart.
<Line
data={this.state.chartData}
options={{
elements: {
point: {
radius: 2
}
},
tooltips: {
mode: 'nearest',
intersect: false
},
scales: {
yAxes: [{
ticks: {
stepSize: 1, //sets the interval that our y axis counts by
beginAtZero: false, //starts our graph at 0 if true
},
gridLines: {
drawOnChartArea: false
}
}],
xAxes: [{
ticks: {
minRotation: 88,
autoskip: true,
autoSkipPadding: 50
},
gridLines: {
drawOnChartArea: false
},
type: 'time',
distribution: 'series',
time: {
unit: 'day',
displayFormats: {
day: 'MMM D',
},
tooltipFormat: 'MMM D h:mm a',
},
},
]
},
responsive: true, //lets us resize our chart
maintainAspectRatio: true, //lets us resize our chart
}
}
/>
Issue Analytics
- State:
- Created 4 years ago
- Reactions:1
- Comments:8 (4 by maintainers)
Top Results From Across the Web
Chartjs autoSkip true not working in Angular - Stack Overflow
I have tried the solutions in stackoverflow. But the auto skip feature seems to be not working properly.(chartjs version => 2.9.3).
Read more >Cartesian Axes - Chart.js
Turn autoSkip off to show all labels no matter what. autoSkipPadding, number, 3, Padding between the ticks on the horizontal axis when autoSkip ......
Read more >AutoSkip: False not working on time xAxes labels-Chart.js
In my case, I needed to set source: date . You will get all the date steps on xAxi. By the way, try...
Read more >JIRA Gadget with ChartJS doesn't work until refresh
After inspecting my code, it seems that my canvas element that I use with ChartJS only appears after this refresh, so I suspect...
Read more >chart js show x axis labels
You can add a custom onclick function to the chart and then ask chartjs for the ... Seems like autoSkip shows all labels...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Hi @Outlaw782. We’re just finishing up rewriting the auto-skip feature right now. Most of the code has already been committed and there are just a couple small PRs pending right now to fix some remaining rough edges. We’ll hopefully release 2.9.0 very soon where I’d expect this to work better
Can you share an interactive example on something like plunkr?