CODEWITHSUNDEEP
javascriptcsshighcharts
Jester
Jester

Reputation: 151

Can you remove specific grid lines and point labels using highcharts without css?

Currently I'm using css to remove my y-axis grid lines and labels like in the below image.

nonexported-highchart

CSS:

.highcharts-yaxis-grid path:nth-child(1),.highcharts-yaxis-grid path:nth-child(2),
.highcharts-yaxis-grid path:nth-child(4),.highcharts-yaxis-grid path:nth-child(5){ stroke:transparent !important; }
.highcharts-yaxis-labels text:nth-child(1),.highcharts-yaxis-labels text:nth-child(2),
.highcharts-yaxis-labels text:nth-child(4),.highcharts-yaxis-labels text:nth-child(5){ fill:transparent !important; }

Whenever I download the chart as an image they reappear which makes sense as it doesn't see the css file I'm using.

enter image description here

I've tried to search for an answer on highcharts or anything on the net and haven't had luck, so here I am presenting this question.

Upvotes: 0

Views: 207

Answers (2)

Jester
Jester

Reputation: 151

Using the accepted answer I did this in a loop to avoid losing my middle gridline and tick val.

events: {
    load: function() {
        var chart = this,
            yAxis = chart.yAxis[0],
            gridLines = yAxis.gridGroup.element.children,
            ticks = yAxis.ticks,
            tickPositions = yAxis.tickPositions;
        var i = 4;
        while(i > -1){
            if(i !== 2){
                gridLines[i].remove();  // the whole array element is removed from gridLines, so we're doing this backwards
                ticks[tickPositions[i]].label.element.remove();
            }
            i--;
        }
    }
}

It became a problem when I was starting from 0 using either the accepted answer or my loop. Hope this helps anyone who may have a ton of gridlines.

Upvotes: 0

ppotaczek
ppotaczek

Reputation: 39099

For example in the load event you can remove specific labels and gridLines:

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

            gridLines[2].remove();
            ticks[tickPositions[2]].label.element.remove();
        }
    }
}

Live demo: http://jsfiddle.net/BlackLabel/5m0s7th2/

API Reference: https://api.highcharts.com/highcharts/chart.events.load

Upvotes: 1

Related Questions