CODEWITHSUNDEEP
highcharts
LandonSchropp
LandonSchropp

Reputation: 10244

Displaying ticks on top of gauge chart

I'm trying to create a gauge chart with the ticks rendered on top of the bar. Ideally, it would look something like this:

Goal

However, I haven't been able to find a setting to change their render order. Right now, my chart looks like this:

Current

Is there a way to change the rendering order of the ticks and the bar in Highcharts' gauge charts?

Upvotes: 0

Views: 1704

Answers (1)

Sasang
Sasang

Reputation: 1281

Using the examples provided by highcharts, i'm able to create a gauge where the ticks are rendered above the gauge bar. It has to do with the zIndex property of the yAxis. Using the template provided by highcharts, in the gaugeOptions object, set the yAxis:zIndex property to 100. Then in the actual gague config/data object, set teh yAxis:zIndez to 99. When you do this, the ticks will continue to appear over the bar even as it passes the ticks value. Take a look at the highcharts updated jsFiddle:

http://jsfiddle.net/3tsrxfq5/1/

Upvotes: 2

Related Questions