[Chartjs]-Chart.js V2 ticklines no grid

by

2👍

✅

What you need for this are Chart.js plugins.

They let you handle what is happening when events like the rendering or the update are triggered.

For instance, in your case, we want to draw again the ticks which were erased via the display:false attribute of options.scales.yAxes.gridLines.
We will then need the afterDraw event. Plugins in Chart.js are created like this :

Chart.pluginService.register({
    afterDraw: function(chart, easing) {
        // Your code in here
    }
});

Now that you know how to do, let’s focus on what to do.

What we want is to redisplay the tick lines on the yAxes. But they were removed (as I said above).

We can’t bring them back, but since Chart.js charts are using a <canvas> tag, we can try to draw them once again.

To do it dynamically (most I can at least), we will need to loop in the different ticks of your y axe and, by also getting the height of your axe, we will be able to draw our own ticks.

Here is a jsFiddle (improved by the OP) with some explanation about what we must do and of course a fully working example, and here is its preview :

enter image description here

4👍

The gridlines display option must be set to true for the ticks part of the gridlines to be drawn.

To show only the ticks, use the drawOnChartArea option to turn off the gridlines on the chart.

scales: {
        yAxes: [{
            gridLines: {
                display: true,
                drawOnChartArea: false,
            }
        }],
    }

EDIT:

JSFiddle

Leave a comment