CODEWITHSUNDEEP
highcharts
Francesco
Francesco

Reputation: 4250

Variable tick length in highcharts

I need to create a column chart where the x-axis ticks are like in the image below: tick example image

  1. one long tick every hour
  2. one short tick every 30
  3. one shorter tick every 15 minutes

I managed to have two different lengths with tickLength and minorTickLength as you can see from this fiddle https://jsfiddle.net/depsir/pso8yya7/

Is there any way to add a third tick length? I'm thinking of something like the labels.formatter but for tick lengths, but any other option will be appreciated

Upvotes: 2

Views: 1356

Answers (1)

Grzegorz Blachliński
Grzegorz Blachliński

Reputation: 5222

I think that one of possible solutions is to change every second minorTicks path, so it will be a little bit longer. You can change it inside load and redraw event callback functions. 

    var makeCustomTicks = function(chart) {
    var ind, d, newD, additionalLength = 8;
    Highcharts.each(chart.xAxis[0].getMinorTickPositions(), function(p, i) {
      if (i % 2 === 0) {
        d = chart.xAxis[0].minorTicks[p].mark.d;
        ind = d.lastIndexOf(' ');
        length = parseFloat(d.substring(d.lastIndexOf(' '), d.length)) + additionalLength;
        newD = d.substring(0, d.lastIndexOf(' ') + 1) + length;
        chart.xAxis[0].minorTicks[p].mark.attr({
          d: newD
        });
      }
    })
  }

Here you can see an example how it can work: https://jsfiddle.net/pso8yya7/2/

You can also add new xAxis with different tick length and different tickInterval. 

xAxis: [{
  type: "datetime",
  tickInterval: 60 * 60 * 1000,
  minorTickInterval: 15 * 60 * 1000,
  minorTickWidth: 1,
  tickLength: 25,
  minorTickLength: 10,
  labels: {
    y: 30,
  }
}, {
  type: "datetime",
  tickInterval: 30 * 60 * 1000,
  tickLength: 20,
  offset: 0,
  linkedTo: 0,
  labels: {
    enabled: false
  }
}],

Here you can see an example how it can work: https://jsfiddle.net/pso8yya7/3/

Best regards.

Upvotes: 2

Related Questions