CODEWITHSUNDEEP
angularjshighcharts
Gaurav Radadiya
Gaurav Radadiya

Reputation: 231

How to hide x and y axis line only in highchart?

I am integrating highchart using angularJs, I want to hide x and y axis line only, I tried with lineColor: 'transparent', it working for line chart only, not working for bar/column chart,

I attached screenshots of issue here for more understanding,

In this image in x and y axis line not showing.

But same configuration not working for column chart.

can any one please guide me for the same.?

Upvotes: 0

Views: 6441

Answers (1)

Mike Zavarello
Mike Zavarello

Reputation: 3554

For column and bar charts, even if you make the line color of the x-axis transparent, you'll still see the grid line for your minimum y-axis value, which is "0" in your chart.

Here's how you can change this:

xAxis: {
    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'], 
    /* make the x-axis line invisible */
    lineColor: 'transparent'
},
yAxis: {
    min: 0,
    title: {
        text: 'Total fruit consumption'
    },
    /* make all y-axis gridlines invisible */
    gridLineColor: 'transparent'
},

Here's a fiddle that shows this in action: http://jsfiddle.net/brightmatrix/13z2kLcf/

One question: in your second screenshot, it looks like you may have already made your y-axis grid lines transparent. Is that true? If so, it would be helpful to see your code to understand why you'd still have that blue line below your columns. I'll be happy to amend my answer if what I shared above doesn't work out.

Upvotes: 3

Related Questions