Highstock xAxis categories aligned - Javascript highcharts

Javascript examples for highcharts:Chart Axis

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

Description

Highstock xAxis categories aligned

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://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function () {/*from   ww  w.  j a v  a  2s  . c  o  m*/
    $('#container').highcharts("StockChart", {
        chart: {
            type: 'column',//try line or spline
         },
        xAxis: {
            tickPositions: [1385625600000, 1408003200000, 1408348800000, 1408521600000, 1408608000000],
            labels: {
                 formatter: function () {
                    return new Date(this.value).getDate()+"/"+(new Date(this.value).getMonth()+1)+"/"+new Date(this.value).getYear() ;
                }
            }
        },
        plotOptions: {
            series: {
                  stacking: 'normal', //null , normal , percent
             }
        },
        series: [{'color': '#009add', 'data': [[1385625600000, 0], [1408003200000, 0], [1408348800000, 0], [1408521600000, 3], [1408608000000, 0]], 'name': 'TYPE1'}, {'color': '#f15d22', 'data': [[1385625600000, 0], [1408003200000, 1], [1408348800000, 0], [1408521600000, 0], [1408608000000, 0]], 'name': 'TYPE2'}, {'color': '#7182a6', 'data': [[1385625600000, 1], [1408003200000, 0], [1408348800000, 0], [1408521600000, 0], [1408608000000, 0]], 'name': 'TYPE3'}, {'color': '#62a60a', 'data': [[1385625600000, 0], [1408003200000, 0], [1408348800000, 2], [1408521600000, 1], [1408608000000, 2]], 'name': 'TYPE4'}]
    });
});

      </script> 
   </head> 
   <body> 
      <div id="container" style="height: 400px; min-width: 600px"></div> 
      <script src="https://code.highcharts.com/stock/highstock.js"></script> 
      <script src="https://code.highcharts.com/stock/modules/exporting.js"></script> 
      <script type="text/javascript" src="https://www.highcharts.com/samples/data/three-series-1000-points.js"></script>  
   </body>
</html>

Related Tutorials