Chart.js - Line charts: draw points between grid lines

Question

I'm creating line charts using Chart.js version 2.1.3.

I want to center labels and points between grid lines on the x axis (like in bar charts).

For labels, I use the option 'offsetGridLines' that offset labels from grid lines:

scales: {
    xAxes: [{
        gridLines: {
            offsetGridLines: true
        }
    }],
    ...

Nevertheless, I can't found a convenient solution to center points.

Here is my initial example (labels placed between grid lines): https://jsfiddle.net/24aotbnc/1/.

And here is my non-elegant solution that creates an empty dataset of type 'bar' and removes it after chart creation (points are drawn between gridlines): https://jsfiddle.net/24aotbnc/2/

Can someone provide a better solution? Thanks.

Pratheeswaran Pratheeswaran · Accepted Answer · 2017-06-05T07:36:47

The position x (either with or without offset) for the Line points are calculated only on the basis of dataset length

 var includeOffset = (labels.length === 1 || dataset.data.length === 1) || me.chart.isCombo;
 x = xScale.getPixelForValue(typeof value === 'object' ? value : NaN, index, datasetIndex, includeOffset);

So the includeOffset decides the position of the line points to be in middle or left for the region and no way to configure it.

Chart.js - Line charts: draw points between grid lines

1 Answers