add custom class name to tick positioner in line charts using javascript - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

add custom class name to tick positioner in line charts using javascript

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> 
      <style id="compiled-css" type="text/css">

@import 'https://code.highcharts.com/css/highcharts.css';
.my-tick {/*from www  . j  av a  2 s  .  co  m*/
   stroke-width: 10px;
   stroke: red;
}
.my-axis .highcharts-tick {
   stroke-width: 10px;
   stroke: red;
}


      </style> 
      <script type="text/javascript">
    $(window).load(function(){
$(function() {
  Highcharts.chart('container', {
    yAxis: {
      tickPositioner: function(min, max) {
        var data = this.series[0].processedYData,
          ticks = this.getLinearTickPositions(this.tickInterval, min, max);
        val = data[data.length - 1]
        ticks.push(data[data.length - 1]);
        ticks.sort(function(a, b) {
          return a - b;
        })
        return ticks;
      },
      className: 'my-axis',
      tickWidth: true,
    },
    series: [{
       data: [1,2,3,4,5,6,7]
    }]
  });
});
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/js/highcharts.src.js"></script> 
      <div id="container"> 
      </div>  
   </body>
</html>

Related Tutorials