Even tick with uneven spacing - Javascript highcharts

Javascript examples for highcharts:Chart Configuration

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

Description

Even tick with uneven spacing

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts test tool</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-git.js"></script> 
      <style id="compiled-css" type="text/css">

#container {//from ww w  .  j  a va2 s  . c  o m
   min-width: 300px;
   max-width: 800px;
   height: 450px;
   margin: 1em auto;
}


      </style> 
      <script type="text/javascript">
    $(function(){
Highcharts.wrap(Highcharts.Axis.prototype, 'translate', function (proceed) {
    var result = proceed.apply(this, [].slice.call(arguments, 1));
    if (this.options.curvature) {
        var val = 1 - Math.sqrt(1 - Math.pow(((arguments[1]-this.min) / (this.max - this.min)), 2)),
            result = (this.len * val);
        if (arguments[2] == 0) {
            result = this.len - result;
        }
    }
    return result;
});
$('#container').highcharts('StockChart',{
    yAxis: {
        min: 10,
        max: 100,
        tickPositions: [20,40,50,60,70,80,90,100],
        showLastLabel: true,
        curvature: true
    },
    series: [{
        data: [20,30,40,50,60,70,80]
    }]
});
    });

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

Related Tutorials