need to eliminate the default last value of y axis and set manually max value of y axis

[damu9618]

here i have attached the image of my bar chart. here last two values y axis is over lapping how i need to solve this problem.

my code:

yAxes: [
        {
          maxBarThickness: barThickness,
          gridLines: {
            drawOnChartArea: false,
            color: gridLineColor,
          },
          ticks: {
            max: progressionBarMax,
            min: progressionBarMin,
            //callback: this.getLastValue,
          },
        },
      ]

 getLastValue(value, index, values) {
    console.log(value);
    console.log(values);
    console.log(index);
    if (index === 0) {
     const step = values[values.length-2] - values[values.length-1]
      return values[1] + step;
    }

    return value;
  }

[benmccann]

@damu9618 please follow the issue reporting guidelines. There's several pieces of missing information here that make this quite a bit of work for us to help you with and so you're unlikely to get much response as a result

What version of Chart.js are you using? Can you try with Chart.js 2.8.0 if you haven't already?

[damu9618]

@damu9618 please follow the issue reporting guidelines. There's several pieces of missing information here that make this quite a bit of work for us to help you with and so you're unlikely to get much response as a result

What version of Chart.js are you using? Can you try with Chart.js 2.8.0 if you haven't already?

@benmccann we are using "chart.js": "2.8.0",
"chartjs-plugin-annotation": "0.5.7",

[benmccann]

Thanks. Can you also include an interactive example?

Bug reports MUST be submitted with an interactive example:
https://codepen.io/pen?template=JXVYzq

[Miodec]

Here is an example. At first i thought that it was caused by setting the values after initialising the chart, but it happens all the time.

https://codepen.io/Miodec/pen/ZEQGqWq?editors=1010

[Miodec]

@benmccann Will this be looked into? Do you need anything else to reproduce this issue?

[benmccann]

I confirmed this behavior is present in 3.0.0-alpha still

It's not exactly clear to me what you'd expect to happen in this case. If you want to remove the second-to-last label you can do that by modifying the ticks in afterBuildTicks

[Miodec]

I dont know how the tick labels work behind the scenes, but in my opinion, I would expect the second to last label to not be drawn if its very close to the last one.

Could this be somehow related to the autoSkip and autoSkipPadding properties?

[benmccann]

Sure, you can set autoSkipPadding to a larger value if you'd like as another solution

[Miodec]

Setting the padding value to 20 still makes the labels a bit too close

Also, wouldn't setting the padding value super high hide a lot of the labels?

EDIT: This is at 40 and as i suspected it hides the labels which I personally would like to keep

[benmccann]

I looked into this. The reason autoSkip doesn't work well in this case is that it assumes all ticks are equally spaced apart. However, the linear scale is doing its own tick generation logic, which adds the extra tick.

A few things we might be able to do:

1. We could stop adding min and max so that all ticks are evenly spaced apart. I know some people would not be happy about this, but this is just an area where people aren't going to agree on what the best default is. I think it's easier to add the points than remove them, so that would make it a bit easier to customize
2. We could have the linear scale generate a tick at every point and then defer to autoSkip to do the skipping. This would reduce bundle size because we could delete all the niceNum code and just set major instead. This would also allow people to disable major if they wanted if they didn't care about the niceNum spacing
3. We could have the autoSkip consider the actual positions of the labels instead of assuming they're located equidistant apart. This could be a little tricky to make work right in all cases. We should probably first add more image tests for autoSkip if we were going to try this to make sure nothing regresses

[etimberg]

I think the first with a mode was requested a couple of times. I even looked into it years ago, but ran into a roadblock and stopped. I don't recall the exact complexity, but perhaps it is time for another look.

[phaseOne]

Most charting tools I've used omit the ticks for the upper and lower bounds unless they fall on the major axis step size, and would be my expectation for the default. Here's an example from Metabase.

@benmccann is there any existing way in the API to override and remove these ticks? Is filtering with the afterBuildTicks callback the preferred solution at the moment?

[benmccann]

It looks basically the same in v3 if you specify a max value like in the earlier sample pen: https://codepen.io/benmccann/pen/qBNWXpw?editors=1010

But if you simply remove the max option and let Chart.js choose it then it does something much better looking, so that's what I'd recommend unless there's a compelling use case where that doesn't work

[etimberg]

Likely resolved by #8569