Chartjs-Chart.js awkward label gaps before last x-axis label

0👍

This has been a known issue since September of 2016 and a pull request for this has been merged on December this year (2018).

It works perfectly as you can see in these fiddles by @sgray which are showing the current bug: /61thywor, and with the fix: /9t7bs01j. (I can’t post the full fiddle URL without posting any code.)

This is not yet released but it will be included in the v2.8 release however there’s no probable release date given yet.

For the meantime, you can try this solution suggested by @RuchiDhore.

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.

Leave a comment