Highcharts draw grid lines into yAxis area

Question

In Highcharts, there is a possibility to shift the y-Axis labels into the plot-area with

yAxis: {
    labels: {
        align: 'left',
        x: 0,
        y: -2
    }
}

With this setting, the labels are covered by the lines, data-labels and so on.

Is it possible to draw the horizontal grid lines across the yAxis-Label-Area without making the xAxis and the series start there. The wished behavior is indicated with the black lines in the image below.

ppotaczek ppotaczek · Accepted Answer · 2019-02-13T14:02:43

The simplest solution is to adjust the xAxis, for example:

xAxis: {
    min: -0.5
}

Live demo: http://jsfiddle.net/BlackLabel/qnayxb04/

API: https://api.highcharts.com/highcharts/xAxis.min

If you want to have more control over the lines, you can use setAttribute to edit the path element:

chart: {
    events: {
        load: function() {
            var gridLines = this.yAxis[0].gridGroup.element.children,
                i,
                path;

            for (i = 0; i < gridLines.length; i++) {
                path = gridLines[i].attributes.d.nodeValue;
                path = 'M 40' + path.substr(4);

                gridLines[i].setAttribute('d', path)
            }
        }
    }
}

Live demo: http://jsfiddle.net/BlackLabel/61h5qtn9/1/

Highcharts draw grid lines into yAxis area

1 Answers