Variable tick length in column chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Column Chart

Description

Variable tick length in column chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
$(function() {/* w ww  . j  a v  a2 s.c o  m*/
  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
        });
      }
    })
  }
  $('#container').highcharts({
    chart: {
      type: 'column',
      events: {
        load: function() {
          makeCustomTicks(this)
        },
        redraw: function() {
          makeCustomTicks(this)
        }
      }
    },
    xAxis: {
      type: "datetime",
      tickInterval: 60 * 60 * 1000,
      minorTickInterval: 15 * 60 * 1000,
      minorTickWidth: 1,
      tickLength: 25,
      minorTickLength: 10,
      labels: {
        y: 30,
      }
    },
    series: [{
      name: 'John',
      data: [
        [Date.UTC(2010, 0, 1, 10, 15, 0), 2]
      ]
    }, {
      name: 'Jane',
      data: [
        [Date.UTC(2010, 0, 1, 12, 30, 0), 2]
      ],
    }, {
      name: 'Joe',
      data: [
        [Date.UTC(2010, 0, 1, 8, 25, 0), 2]
      ],
    }]
  });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="min-width: 500px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials