use tick Positioner to set tick at end of month for stock chart - Javascript highcharts

Javascript examples for highcharts:Stock Chart

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

Description

use tick Positioner to set tick at end of month for stock 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" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.8.0/lodash.min.js"></script> 
      <script type="text/javascript">
$(function () {/* ww  w. ja v a  2s . c  om*/
    $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
        // Create the chart
        $('#container').highcharts('StockChart', {
            xAxis:{
                tickPositioner:function(min, max){
                    var result = [];
                    var current = min;
                    while(current < max) {
                        var date = new Date(current);
                        var lastDate = new Date(date.getFullYear(),
                                                date.getMonth() + 1,
                                                0,
                                                0,
                                                -date.getTimezoneOffset());
                        var nextDate = new Date(date.getFullYear(),
                                                date.getMonth() + 1,
                                                1,
                                                0,
                                                -date.getTimezoneOffset());
                        result.push(lastDate.getTime());
                        current = nextDate.getTime();
                    }
                    result.info = this.tickPositions.info;
                    return result;
                }
            },
            rangeSelector : {
                selected : 1
            },
            title : {
                text : 'AAPL Stock Price'
            },
            series : [{
                name : 'AAPL',
                data : data,
                tooltip: {
                    valueDecimals: 2
                }
            }]
        });
    });
});

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

Related Tutorials