Variable tick length in highcharts -


i need create column chart x-axis ticks in 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 have 2 different lengths ticklength , minorticklength can see fiddle https://jsfiddle.net/depsir/pso8yya7/

is there way add third tick length? i'm thinking of labels.formatter tick lengths, other option appreciated

i think 1 of possible solutions change every second minorticks path, little bit longer. can change inside load , 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 can see example how can work: https://jsfiddle.net/pso8yya7/2/

you can add new xaxis different tick length , 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 can see example how can work: https://jsfiddle.net/pso8yya7/3/

best regards.


Comments

Popular posts from this blog

sequelize.js - Sequelize group by with association includes id -

android - Robolectric "INTERNET permission is required" -

java - Android raising EPERM (Operation not permitted) when attempting to send UDP packet after network connection -