Subhojit
Subhojit

Reputation: 1541

GridLines getting removed on y-axis visibility off

I was making visibility false for y-axis as I don't wanna show y-axis hence made visible false but the problem here is gridlines also got removed which needs to be kept in the chart. How to make y-axis visibility off by keeping the gridlines?

Please find the working demo here => JSFiddle Demo Any help would be appreciated.

Here's my code part:

Highcharts.chart('container', {
    chart: {
        type: 'scatter',
        zoomType: 'xy'
    },
    title: {
        text: 'Height Versus Weight of 507 Individuals by Gender'
    },
    subtitle: {
        text: 'Source: Subhojit'
    },
    xAxis: {
        title: {
            enabled: true,
            text: 'Height (cm)'
        },
        startOnTick: true,
        endOnTick: true,
        showLastLabel: true
    },
    yAxis: {
        title: {
            text: 'Weight (kg)'
        },
        visible: false
    },
    legend: {
        layout: 'vertical',
        align: 'left',
        verticalAlign: 'top',
        x: 100,
        y: 70,
        floating: true,
        backgroundColor: Highcharts.defaultOptions.chart.backgroundColor,
        borderWidth: 1
    },
    plotOptions: {
        scatter: {
            marker: {
                radius: 5,
                states: {
                    hover: {
                        enabled: true,
                        lineColor: 'rgb(100,100,100)'
                    }
                }
            },
            states: {
                hover: {
                    marker: {
                        enabled: false
                    }
                }
            },
            tooltip: {
                headerFormat: '<b>{series.name}</b><br>',
                pointFormat: '{point.x} cm, {point.y} kg'
            }
        }
    },
    series: [{
        name: 'Female',
        color: 'rgba(223, 83, 83, .5)',
        data: <data>
    }]
});

Upvotes: 0

Views: 34

Answers (2)

Subhojit
Subhojit

Reputation: 1541

I found the solution which I was looking for and thought of sharing with you all if it be of any help to anyone someday.

Please find the working solution here => JSFiddle Solution

Below is the solution of hiding the axis line and labels without effecting the gridlines:

yAxis: {
    title: {
        text: 'Weight (kg)'
    },
    labels: {
        enabled: false
    },
    lineColor: 'transparent'
},

Upvotes: 0

Priyank Kachhela
Priyank Kachhela

Reputation: 2635

According to this document To hide labels we need to labels object and in that object need to pass enabled: false

    yAxis: {
        title: {
            text: 'Weight (kg)'
        },
        labels: {
            enabled: false
        }
    },

Highcharts Demo

Upvotes: 1

Related Questions