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

12,460

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

type: 'line',
data: data,
options: {
    ...
    scales: {
        xAxes: [{
            gridLines: {
                offsetGridLines: true
            }
        ]}
    }
}
Share:
12,460
DMEM
Author by

DMEM

Sr. Director of R&D

Updated on June 06, 2022

Comments

  • DMEM
    DMEM almost 2 years

    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?