[Chartjs]-How to align Chart.JS line chart labels to the center

by

1👍

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

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

1👍

Test this:

labelOffset:-5 //adjust number

0👍

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
                }
            ]}
        }
    }
}

0👍

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 comes 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.

Leave a comment