Interval Markers on both side of axis in Highcharts

If you want to have interval markers on both side of axis in Highcharts and wondering how to do it because Highcharts only support tickPosition = inside or outside. Here is a simple work-around for it.
We can do it in three simple steps.

  1. Add one more xAxis, with tickPosition as ‘inside’
  2. Disable its labels (so that there will be no gap between both the axes
  3. link the second axis with first one using linkedTo
 xAxis: [{
    tickPosition: 'inside',
    tickWidth: 2,
    labels: {
       enabled: false
    },
    tickInterval: 1.666
 },
 {
    tickInterval: 5,
    tickWidth: 2,
    linkedTo: 0
 }]

JS fiddle: http://jsfiddle.net/pranavaa/93o4jqga/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s