Variable tick length in highcharts -
i need create column chart x-axis ticks in image below:
- one long tick every hour
- one short tick every 30
- 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
Post a Comment