How to align Chart.JS line chart labels to the center

DMEM picture DMEM · Nov 10, 2016 · Viewed 8.9k times · Source

I'm using Chart.JS 1.0.2 to create a line chart: The chart I'm getting right now

What I'm trying to do is move the labels that are on the bottom of the chart the center of each rectangle (instead of being aligned with the vertical grid lines):

What I'm trying to get to

There is no documentation about this on chartjs.org but I believe that with a smart trick this problem can be easily solved. Any ideas on how this can be accomplished?

Answer

user4842787 picture user4842787 · Apr 19, 2017

offsetGridLines (boolean) If true, labels are shifted to be between grid lines.

type: 'line',
data: data,
options: {
    ...
    scales: {
        xAxes: [{
            gridLines: {
                offsetGridLines: true
            }
        ]}
    }
}