Double gap at the end of chart using autoSkip=true in line chart

[ruchidhore12]

Chart type - line. I have around 60 label points to be displayed on x-axis. Requirement is to show labels horizontal. However when I make the labels horizontal, they start overriding on each other, so I want to display less number of label points depending on the screen size. I have kept autoSkip=true in options. I cannot use maxTicksLimit because labels count should adapt according to screen size. Even making the label blank cannot be used because it should adapt to screen size. The autoSkip option adds a double gap between last two ticks in the chart.

Expected Behavior

Equal width should be given between all gridlines

Current Behavior

Double gap added between last 2 gridlines

Fiddle link:

https://jsfiddle.net/ruchidhore93/3op2qdn9/31/

Environment

Chart.js version: 2.6.1

[benmccann]

Related issues: #4626 & #4358

There was a PR at one point to fix this, but it went inactive: #5499

[sgray]

Hi, @benmccann. I'm experiencing this issue as well. Is the solution in #5499 the correct way forward? If so, I may be able to pick it up.

[ruchidhore12]

@sgray , let me explain you why the gap appears.
Lets say we have a line chart with 60 points (or simply 60 labels). Now when we enable autoSkip = true, the job of autoskip is to skip some labels. Assume with the available screen size, the autoSkip internally calculates that it has to skip every second label.

Original labels: 1, 2, 3, 4, 5 ...........60
With autoskip labels would be (assuming it has internally calculated 1): 1, 3, 5,........57, 59

The chart has to always show first and the last gridline, so label 60 has to be there:
Refined list of labels: 1, 3, 5,........57, 59, 60

If label 59 and 60 are shown and if they are horizontal, they will overlap. Github issue link (#3051)

To solve the above issue, Chartjs does not show label 59....hence the final list of labels is: 1, 3, 5,........57, 60

Now you can imagine, if after 57th label directly 60th label is shown, its going to show a big gap at the end because gaps between other points is less and the same.

That is the reason why gap appears.

[sgray]

Thanks, @RuchiDhore. I'm with you on why the gap appears. I'm just trying to find the best way to not have that happen. Were you able to make it work on your project?

[ruchidhore12]

@sgray , sorry but at least till this date I found no solution to bring in equal distance (like other distances between two gridlines) at end

However, you can try following 2 options:

1. If your labels are 60, make them 61, in this case the gap wont appear, because after 59th, 60th will be skipped and 61st (the last one) will be shown. But the problem with this solution is when screen size changes, there can be a case where a gap may reappear.. that depends on your project requirements.. This option is not much feasible!

2. Draw a gridline at position 59th, its label using a plugin, hide label at 60th position and let the gap between 59th and 60th stay as it is. So in that case, gap will be there, but a one that doesn't look that bad as well as the labels wont overlap at position 59th and 60th.

[andy14312]

@RuchiDhore Hi, could you solve this issue after this commit #5891 ? I'm using version 2.7.3 which is the latest one and I still see the last tick not being ignored despite of not having equal spaces between the ticks. Any thoughts?

[andy14312]

Oh okay, my bad. the fix for this hasn't been released yet. May I know when is this scheduled to be released? @sgray