Chart.js: Using `stepSize` and `maxTicksLimit` together doesn't work.

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)

Most upvoted comments

I think we can add a minStepSize option that works with the auto tick generation algorithm.

@chris-wood-dynmark I think that would be supported with the minStepSize set to 1 but I’ve edited my list above to include that requirement.

I wrote that we should support it for both minStepSize and stepSize though I kind of feel that it is more applicable to stepSize only. Since it forces the stepSize to be a certain value, while minStepSize still runs the auto generate algorithm (which takes into account maxTicksLimit) 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;

    return tick.toLocaleString();
}

}`

This achieved the minStepSize = 1 that I required

Unfortunately setting stepSize to 1 has a effect I don’t like. When you look at my fiddle: http://codepen.io/anon/pen/MyRopv

You see the yAxis goes to 19. Without the stepSize option it will go to 20: http://codepen.io/anon/pen/ONYzwg

I 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 minStepSize option 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.

ticks: {
    callback: function( tick, index, ticks ){
        if( tick.toString().startsWith( '1' ))
            return tick.toLocaleString();

        return null;
      }
  }

image

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: 1 will 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.