I have a highcharts graph and everything is going on as the mockup below. But there are a few things I am stuck on. Is there a way to remove all the gridlines from the yAxis except for the one in 0 like the one shown in the picture below with highcharts? Or do we have to use our own javascript to accomplish that? Also, can we show the grey colored areas like that one between the yAxis label and the graph and the one in the right side of the graph (end of the graph) ?

Thanks For any suggestions.

I have a highcharts graph and everything is going on as the mockup below. But there are a few things I am stuck on. Is there a way to remove all the gridlines from the yAxis except for the one in 0 like the one shown in the picture below with highcharts? Or do we have to use our own javascript to accomplish that? Also, can we show the grey colored areas like that one between the yAxis label and the graph and the one in the right side of the graph (end of the graph) ?

Thanks For any suggestions.

• javascript
• graph
• charts
• highcharts

• 1 You can use Plotlines and Plotbands for that. – Nina Commented Apr 21, 2013 at 12:56
• @Nina thanks for the heads up on that, I had used plotlines, but was not sure about having more than one. Thanks again. – saurjk Commented Apr 21, 2013 at 13:24
• m not able to increase the length of the plotlines, but it did do half of the work required ... – saurjk Commented Apr 21, 2013 at 13:35
• If you want you can put up a JSFiddle and we can have a look at it – Nina Commented Apr 21, 2013 at 16:59
• Here it is, jsfiddle.net/saurjk/JWZ2S, i need the red plotline to touch the yAxis label line, is that possible ? – saurjk Commented Apr 22, 2013 at 15:28

1 Answer 1

You can set gridLineWidth as 0. http://api.highcharts.com/highcharts#xAxis.gridLineWidth

Example: http://jsfiddle.net/ssQVJ/

yAxis: {
        gridLineColor: '#197F07',
        gridLineWidth: 0,
        lineWidth:1,
         plotLines: [{
            color: '#FF0000',
            width: 1,
            value: 0
        }]
    },