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

Question

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.org but I believe that with a smart trick this problem can be easily solved. Any ideas on how this can be accomplished?

user4842787 · Answer 1 · 2017-04-20T22:34:45.277

1

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

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

edited Apr 20 '17 at 22:34

answered Apr 19 '17 at 13:04

user4842787

98
8

1

You gave the same answer as Pasqual. This solution is for Chart.js 2.0 while I'm working with Chart.js 1. – DMEM Apr 19 '17 at 18:33
I didn't change param in code sorry... Now it's edited. I'm using offsetGridLines instead of drawOnChartArea. Does it work now? – user4842787 Apr 20 '17 at 22:36
I still don't think this is Chart.js 1.x syntax. The current syntax I have is: `new Chart(document.getElementById("line").getContext("2d")).Line(lineChartData, { responsive: true, animation: true, pointDot: true, pointDotRadius: 5, bezierCurve: true, pointHitDetectionRadius: 60, datasetStroke: true, datasetStrokeWidth: 4, datasetFill: true, barDatasetSpacing: 1, scaleOverride: true, drawOnChartArea: true, scaleSteps: 4, scaleStartValue: 0 });` – DMEM Apr 24 '17 at 00:12
3

Wrong ! This parameter don't shift labels but GRIDLINES. It's not the same thing. – Jerry Nov 27 '17 at 14:09

score 1 · Answer 2 · edited Aug 24 '21 at 06:20

1

Test this:

labelOffset:-5 //adjust number

edited Aug 24 '21 at 06:20

Adam Calvet Bohl

1,009
14
29

answered Aug 24 '21 at 03:22

TSupong

11
2

If you want to propose debugging experiments please use a comment. Though https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead If this is not a proposed experiment and is meant to be an actual answer please [edit] according to [answer]. Especially explain how this works and why it is supposed to solve the problem. – Yunnosch Sep 12 '21 at 09:48

score 0 · Answer 3 · edited May 24 '18 at 07:10

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

edited May 24 '18 at 07:10

robsch

9,358
9
63
104

answered Mar 09 '17 at 09:32

Pasquale

1
1

1

Add a small explanation to your answer to describe why this works. – Morgoth Mar 09 '17 at 09:51
While this code snippet may solve the question, [including an explanation](http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – DimaSan Mar 09 '17 at 10:48
@Pasquale I think this solution is for chart.js 2.x while as I stated in my question, I am using chart.js 1.0.2. I tried to add `drawOnChartArea: true` to my chart options but that didn't help. – DMEM Mar 13 '17 at 10:11
This does not seem to solve the question at all, does it? How does putting the lines in the chart area center the tick labels? – Offlein Nov 10 '17 at 20:51

score 0 · Answer 4 · answered Apr 22 '20 at 20:58

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.

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

4 Answers4