I'm using Chart.JS 1.0.2 to create a line chart:

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):

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

I'm using Chart.JS 1.0.2 to create a line chart:

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):

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

• javascript
• charts
• chart.js
• linechart

4 Answers 4

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

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

Test this:

labelOffset:-5 //adjust number

In ChartJS Documentation, under "Grid line Configuration" there is the drawOnChartArea option:

Name: drawOnChartArea
Type: boolean
Description: If true, draw lines on the chart area inside the axis lines. This is useful when there are multiple axes and you need to control which grid lines are drawn

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

A little late, but hopefully helps someone.

My issue was trying to force a chart with type: 'bubble' and an x axis with type: 'linear' to place the labels in the center of the grid lines. The "centering the label" functionality es standard for an axis with type: 'category', like on bar charts. You can get linear point placement with category style labels by having two xAxes defined and not displaying the linear one.

In this example, points are plotted across a full 365 days, with x axis ticks for each quarter and the quarter label centered within its section of the plot.

data: {
    xLabels: ['Q1', 'Q2', 'Q3', 'Q4'],
    ...
}, 
options: {
    scales: {
        xAxes: [
            {
                id: 'xAxis1',
                type: 'linear',
                display: false,
                ticks: {
                    min: 0,
                    max: 365,
                    stepSize: 365 / 4
                }
            },
            {
                id: 'xAxis2',
                type: 'category',
                gridLines: {
                    offsetGridLines: true
                },
                scaleLabel: {
                    display: true,
                    labelString: 'Day of Year'
                }
            }
        ],
        ...
    }
}

I've used this for chart.js 2.x.