Chart.js: Chartjs v2.8 removes latest label on line chart

[yusufozturk]

Hi,

Chartjs 2.8 removes latest label which makes it harder to understand the chart. I can confirm that this behaviour started with version 2.8. I added two codepens for v2.7 and v2.8 so you can see the difference.

We do not use time scale. Date comes as string from backend and we handle the zooming operations from backend as well.

Here is how it looks in our product:

v2.7:

v2.8:

Expected Behavior

User should see latest label on line chart.

Here is the correct view from v2.7:
https://codepen.io/yusufozturk/pen/NJEKpw

I see latest label here:

Current Behavior

Chartjs 2.8 removes the latest label, and so there is an empty space at the end of the labels.

Here is the issue from v2.8:
https://codepen.io/yusufozturk/pen/Lagwvo

Label is visible on chart but not on the axis:

Possible Solution

I will revert back to v2.7. I don't have any other solution at the moment.

Steps to Reproduce (for bugs)

Create a chart with lots of data points and try to limit width of the chart. So Chartjs will remove some of the labels to fit all labels in to the chart area. But latest version will also remove the latest label.

Environment

• Chart.js version: 2.8
• Browser name and version: Chrome 72.0.3626.121

[simonbrunel]

This change comes from #5891, considered as a bug fix because the "always display last tick" was reported many times as an issue and because the initial reason of its implementation was a bit obscure. It also made the auto skip behavior weird and not aesthetic in many cases.

In 2.8, we decided to "fix" it by making the auto skip logic consistent for all ticks without any special case for the last one. Though, I agree we should support such design, however, the API shouldn't be dedicated to this specific use case, thus I doubt we will consider options like alwaysShowLastTick.

Some suggestions that would need to be debated:

autoSkipReverse: true // skip ticks from end to start

// and/or 

autoSkip: function({tick, index, ticks}) {
    return undefined; // let the auto-skipper decide
    return true;      // skip it
    return false;     // keep it
}

We could also start nesting auto skip specific options under autoSkip:

autoSkip: {
    reverse: true,
    padding: 4
}

[yusufozturk]

@simonbrunel I understand the pain here, but if we are going to implement a realtime chart with ChartJs, we must show latest tick. Otherwise end user might think, realtime chart is not in real time, and it's going a few seconds late. That's why it's very important to show last tick. (We update charts every 500 ms, so we can show performance stats in realtime)

I also understand It's not easy to offer something which can make everyone happy. But I think it's nice to put an option for backward compability for other people who likes to keep the same behaviour in the future. (Please don't get me like I'm complaining, but consider this as a feedback) Thank you for your great efforts. We love ChartJs :) 💯

[Hedva]

The reason I don't want to use 2.8 right now because the last label can dissapear

[benmccann]

I wonder if you could just handle manually by removing the last label and adding a new one with the max value of the axis

[yusufozturk]

@benmccann This is one of our real time chart. I think, we do the same way, removing last label and adding a new date label as string. So if customer looks into this, he does not see latest date. In this case, he might think that, real time chart is 3-4 seconds behind of the time.

Also we see now, with v2.8, tooltip squares are empty:

It's probably something is changed with 2.8 and we do not send background color of the tooltip or point from the backend. I think that's why it's empty but we will fix it.

[yusufozturk]

@simonbrunel Thanks for pointing out the commit. I changed that "skipping" line and now I see the latest point.

I believe there will be an option to enable this in the next release. Otherwise we can use custom code.

[nagix]

@yusufozturk chartjs-plugin-streaming may fit your use case as ticks move together with lines and users will easily know it's realtime.

[nagix]

For empty tooltip squares, set borderDash, pointStyle, pointHoverBorderColor, pointHoverBackgroundColor and pointBackgroundColor to undefined instead of null, or remove all of them from the config.

[seantott]

I am having the same issues as @yusufozturk as we are also using live data. However, my current fix was to redesign the _autoSkip function to be the code below. As a temporary fix I am using a plugin to swap out the current function on each of the relevant axes.

Note: Since we are only using this for the X Axis, this only affects that, however this could be adapted to include yAxis support.

function newAutoSkip(ticks) {
  var me = this;
  var optionTicks= (me.options && me.options.ticks && me.options.ticks.minor) || {};
  var innerCount = 0;
  varmaxTicks = optionTicks.maxTicksLimit;

  // Axis length
  var axisLength = me.width - (me.paddingLeft + me.paddingRight);

  var result = [];

  if ((me._tickSize() * ticks.length) > axisLength) {
    innerCount = Math.floor(axisLength / me._tickSize()) - 2;
  } else {
    innerCount = maxTicks - 2;
  }

  if (maxTicks && ticks.length > maxTicks) {
    innerCount = Math.min(innerCount, maxTicks);
  }
  var displayInterval = Math.ceil((ticks.length + 1) / (innerCount + 1));
  for (var i = 0; i < ticks.length; i++) {
    if (displayInterval > 1 && i % displayInterval > 0 && i !== (ticks.length - 1)) {
      delete ticks[i].label;
    } else if ((displayInterval < 1 || isNaN(displayInterval)) && i !== (ticks.length - 1)) {
      delete ticks[i].label;
    }
    result.push(ticks[i]);
  }
  return result;
}

I really like @simonbrunel's suggestion of adding a custom autoSkip function, and I also think that having an autoSkip set of options under the ticks would be very useful to save coding and present multiple implementations. Happy to help implement this.

[gerardhoogland-united]

Agree: The last label contains very important information in our case, and when the last label is omitted, our graph does not make much sense. We would appreciate an extra option to tune the autoSkip behaviour, to include the last label (versus: spread ticks evenly)

[aldipower]

Having the same problem here.
The last tick is absolutely mandatory in my charts and cannot be omitted.
Already tried some dirty tricks, but they introduce other problems, so an option like alwaysDisplayLastTick would be great, getting back to old behavior from 2.7.0.
Only option I currently have is to downgrade Chart.js.
I cannot understand why this breaking change from 2.7.0 to 2.8.0 was actually introduced as a _breaking_ change and not as an additional option.

[aldipower]

My charts reflecting endurance sports activities having 2 x-scales for distance and duration/time.
The y-scales displaying data such as heartrate and so on.
As a runner or cyclist you're interested in how far you made it or how long you took, so the last tick is actually the most important one of the whole chart. :)
For me it's also more aesthetic having an uneven gap rather then skipping the last tick.

But of course I can understand the reasons for the new autoskip behaviour as well and for other use cases they absolutely makes sense.

So, why not just offering both options?
The situation now is a breaking change in a minor version change, which also could considered as a bug by some people.

[yusufozturk]

Hi @simonbrunel, do you have any quick workaround for the latest version to show last label?

Apparently autoSkip code is changed and I can't make it work anymore.

Thanks!