Last vertical grid line shows up in middle of chart in Chartjs 2.9.4. Fixed in 3.x

[Marc-Simard]

Since the issue seems to be resolved in version 3.x, this is for documentation purposes only.

Expected Behavior

Vertical grid lines should be displayed at regular intervals.

Current Behavior

The very last vertical grid line shows up in the middle of the chart when the width of the chart is under a certain threshold.

Possible Solution

Use a wider chart is a workaround, but may not be possible based on chart data & implementation.

Steps to Reproduce

Demo of the issue:
https://jsfiddle.net/Marc_Simard/fxeor2jt/2/

Environment

• Chart.js version: 2.9.4
• Browser name and version: Firefox / Chrome

[etimberg]

This is caused by the overall chart type being 'bar'. If I switch it to 'line' it works correctly. This is likely due to the bar defaults for the offsetGridLines setting.

[Marc-Simard]

Thanks for the input. Using line does seem like a better workaround. I played with my fiddle a bit more, and noticed that the issue no longer occurs when the chart is wide enough so that every xAxis label is displayed.
When a bit smaller, every second xAxis label is displayed, and that's when issue occurs. Going even smaller (every 3rd / 4th) also shows the issue.