Chart.js: [BUG] Chart is missing an additional step on the y-axis at the inner top / bottom of chart canvas when values are too small

[SesioN]

Expected Behavior

Should display an additional step in the y-axis of stepSize at the top and bottom of the chart.

Current Behavior

Doesn't display any padding at the top and bottom of chart canvas.

Possible Solution

Add a padding of stepSize to top and bottom of y-axis. In my example sceenshot the y-axis would be from -0.001 to 0.011

PS: beginAtZero = false;

Steps to Reproduce (for bugs)

Context

The chart looks broken and not so nice when there's no padding at the top/bottom of y-axis.

Maybe someone knows how I can change this behavor? which function to extand/override?

Environment

• Chart.js version:
  2.5.0
• Browser name and version:
  Latest chrome

[etimberg]

Have you tried the padding config options?
https://github.com/chartjs/Chart.js/blob/master/docs/configuration/layout.md#padding

[SesioN]

@etimberg
Yes I have but that doesn't produce the wanted experience, adding padding by the layout options does only add padding top/bottom outside of the canvas, and not adjust the y-axis.

What I want, is an additional label in the y-axis. (which would be another y-axis step of stepSize)

On the screenshot you can see that the points are touching the edge of the canvas, the highest entry is positioned at 0.010, so I would like to have another label (step) in the y-axis, at 0.011, same goes for the lowest entry which is in my screenshot at 0, just as for the highest entry, i'd like like here the y-axis to show -0.001. So that the actual graph points don't touch/get display at the edge of the canvas.

Look this is how it should look like (Working example), thats what I mean by top/bottom padding of y-axis.

Now compare this with my first screenshot, there you will notice that the stepping of y-axis doesn't show such padding and thus looks broken. So sometimes the y-axis is as expected, sometimes not.

[etimberg]

We could consider adding options to extend this range out by a small percentage. I'm not sure if a lot of other users would want this or not.

@simonbrunel thoughts?

[SesioN]

@etimberg

Thanks for taking time.

Can you maybe point me at the right functions that are responsible for generating/calculating the steps in the y-axis? I would gladly look into them.

What I don't understand is, that sometimes your library does add that one extra step and sometimes not. (eg first and last Screenshot that I posted)

Isn't this already a feature but not working as expected?

[etimberg]

We always add the last tick >= to the data maximum. When the last tick generated is also the data max, another tick is not added. Cases were it happens might be numerical rounding problems, or cases where the data max is just slightly above the previous tick value (even 1e-9 above would do it) and so we add another tick.

The data maximum is calculated at https://github.com/chartjs/Chart.js/blob/master/src/scales/scale.linear.js#L16
and the ticks are actually built here https://github.com/chartjs/Chart.js/blob/master/src/scales/scale.linearbase.js#L61

[GanadiniAkshay]

@SesioN Any solution to this as I find this annoying too and a fix would be nice. If you are not looking at it or need it fixed anymore maybe I can take a look

[cristianberroeta]

Hi all,

Here is a hacky solution (it worked for me at least, but obviously a chartjs built-in solution would be much better):

You could add a "transparent placeholder" dataset. In this dataset, you would add 2 graph points, with these y-axis values:

• somewhat above the max y-axis value of your real data
• somewhat below the min y-axis value of your real data

You should choose that "somewhat" value conveniently. If you just want one additional tick, and considering what @etimberg says above "...or cases where the data max is just slightly above the previous tick value (even 1e-9 above would do it) and so we add another tick...", you could just add some value small enough for your case, but greater than 1e-9, and it would work.

And for their x-axis values, you should choose some value within your real data.

Also, you should make this dataset colors transparent.

Finally, if you have a legend, don't forget to remove the placeholder dataset from it. In chartjs version 2.7.2, this is one way to achieve it, assuming that the first element in the datasets array is the placeholder dataset:

options: {
    ...
    legend: {
        labels: {
            filter: function(legendItem, data) {
                return legendItem.datasetIndex !== 0
            }
        }
    },
    ...
}

[SeanRoberts]

This would definitely be a nice feature, bar graphs in particular can look pretty unappealing when the bar hits the top of the chart. Having some kind of "extraTicks" option would be great.

[naru-shankar]

We could consider adding options to extend this range out by a small percentage. I'm not sure if a lot of other users would want this or not.

@simonbrunel thoughts?

Our client requested to have one more tick on both ends of the graph so that the graph is not touching the actual border lines. Built-in solution would be awesome.
Thanks!

[benmccann]

That feature would make sense to me. I'd consider it a bug that it doesn't do it now

[kruzyk]

A free space between the bar and the top of the chart is must have, so please consider adding options to extend this range out by a small percentage (10%?).

[squido75]

Does ticks.suggestedMax and ticks.suggestedMin solve this? It would seem setting these will extend the axes.

[kruzyk]

as I know ticks.suggestedMax and ticks.suggestedMin take only integer - for dynamic charts it's not a solution. I have to pass max value from dataset and increase it by 10% for example.

[kurkle]

There is a offset setting for cartesian axes: https://www.chartjs.org/docs/latest/axes/cartesian/#cartesian-axes
Does that work for you @kruzyk?

[squido75]

@kruzyk yup, you're right, that's what I did, loop thru my dataset to get highest and lowest value, then apply a factor to it to get suggestedMax and suggestedMin. Tho via this method, sometimes I get 2 additional ticks on top, because it depends on the calculated suggestedMax.
@kurkle I tried using offset but it only works on xAxes. Didn't work on yAxes. I'm tried on line graph with xAxes type as 'time'.

[kruzyk]

@squido75 so I did this:

var res = Math.max.apply(
                    Math,
                    $chart_instance.data.datasets[0].data.map(function(o) {
                        return o.y;
                    })
                );
$chart_instance.config.options.scales.yAxes[0].ticks.suggestedMax = Math.ceil(res * 1.1);

@kurkle as squido said, offset didn't work in my case.

[kurkle]

afterDataLimits hook can be used to adjust the range:

          yAxes: [
            {
              display: false,
              afterDataLimits(scale) {
                // add 5% to both ends of range
                var range = scale.max-scale.min;
                var grace = range * 0.05; 
                scale.max += grace;
                scale.min -= grace;
              }
            },
          ],

https://jsfiddle.net/s7wo89ad/