Chart.js: Using `stepSize` and `maxTicksLimit` together doesn't work.
- I have read the guidelines for contributing
- I have included an example of my issue on a website such as JS Bin, JS Fiddle, or Codepen. (Template)
I want to have a chart with a minimal stepSize of 1, basically I don’t want the steps to have decimals like 0.5 or something. I can set stepSize to 1, but then it will show a label for each step regardless of maxTicksLimit.
You can see the problem here: http://codepen.io/anon/pen/pyBPME
If you disable the stepSize option, the labels are fine, but if you then disable “dataset 1” and it only shows “dataset 2”, it will have steps like 0.5 and 1.5 which I don’t want.
Am I missing configuration or is this an issue?
Many thanks!
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Comments: 26 (7 by maintainers)
I think we can add a
minStepSizeoption that works with the auto tick generation algorithm.@chris-wood-dynmark I think that would be supported with the
minStepSizeset to1but I’ve edited my list above to include that requirement.I wrote that we should support it for both
minStepSizeandstepSizethough I kind of feel that it is more applicable tostepSizeonly. Since it forces the stepSize to be a certain value, whileminStepSizestill runs the auto generate algorithm (which takes into accountmaxTicksLimit) it might be odd to have it apply in that case since there are 2 variables for adjusting the step size.@etimberg So do you think it’s easy to implement? Would like to give it a try.
Thanks georgeu2000, using the callback enabled me to filter out fractions using
`ticks: { beginAtZero: true, maxTicksLimit: 10, callback: function (tick, index, ticks) { if (tick.toString().indexOf(‘.’) !== -1) return null;
}`
This achieved the minStepSize = 1 that I required
Unfortunately setting
stepSizeto1has a effect I don’t like. When you look at my fiddle: http://codepen.io/anon/pen/MyRopvYou see the yAxis goes to 19. Without the
stepSizeoption it will go to 20: http://codepen.io/anon/pen/ONYzwgI like this behaviour better because it’s easier to read when it goes in steps of 5 up to 20, instead of steps of 4 up to 19.
So if the
minStepSizeoption would be implemented it would solve these two problems. Do you think it will be hard to implement? I wouldn’t mind giving it a try myself.Hi, Can we define a fixed distance between ticks, but where the value difference between 2 ticks to be not same.
example: suppose we need to show 10 ticks or scale labels on x-axis. But the tick values : 1, 10, 100, 200, 500, 1000, 5000, 20000, 100000, 500000
Is it possible?
Thanks a regards Amitav
I recently ran into this issue as well as https://github.com/chartjs/Chart.js/issues/3092.
The solution I found is to create a custom formatter. This gives you much finer control over which labels are rendered. In my experience, often the only way to tweak charts effectively is to have very fine control.
I would love to see minStepSize implemented, I’m working with small numbers occasionally and seeing my dataset show 0.5 when that’s not even a possible value (for the y-axis) is a bit odd…
Example: I can’t have half a person show up to an event. I may have events in which only ~20 people show up and if I log when they arrive and when they leave I can see halfsies. If I now work with numbers of in the triple digits I don’t get this, however, using
stepSize: 1will give me an awful y-axis compression. (http://codepen.io/anon/pen/RRGMbj)Large dataset: http://i.imgur.com/5yEXd7r.png Small dataset: http://i.imgur.com/LRBn0jP.png
Ok thanks, that is a way to solve my problem: http://codepen.io/anon/pen/MyRopv
Though I think it would be nicer if the options would work together. But it does the job for now.