Highstocks to Use tickmarkPlacement "between" on datetime Axis without categories - Javascript highcharts

Javascript examples for highcharts:Chart Axis

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

Description

Highstocks to Use tickmarkPlacement "between" on datetime Axis without categories

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Chart Base</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.js"></script> 
      <script type="text/javascript">
    $(function(){/*www. ja v a  2 s. c om*/
var data1          = [8,9,8,7,4,5,6,3,2,1];
var data2          = [0,0,0,0,0,0,0,0,0,0];
var pointStart     = 1404390599000;
var pointInterval  = 86400 * 30 * 1000;
var options = {
    chart: {
        style: {
            fontFamily: 'Geneva, Tahoma, Verdana, sans-serif'
        }
    },
    title: {
        text: 'Chart Test Example',
        style: {
            fontSize:'1em',
            fontWeight:'bold'
        }
    },
    legend: { },
    tooltip: {
        shared: true,
        crossHairs: true,
        useHTML: true
    },
    plotOptions: {
        series: {
            pointStart:pointStart,
            pointInterval: pointInterval,
            pointPlacement:'between',
            marker: {
                enabled:false
            }
        }
    },
    xAxis: {
        type:'datetime',
        lineColor:'#000',
        lineWidth:.5,
        tickWidth:.5,
        tickLength:3,
        tickColor:'#000',
        gridLineWidth:.5,
        gridLineColor:'#eee',
        tickInterval:86400 * 30 * 1000,
        title: {
            text: 'X Axis',
            style: {
                color:'#000',
                fontSize:'.8em'
            }
        },
        labels: {
            x:25,
            formatter: function() {
                return Highcharts.dateFormat('%b',this.value);
            }
        }
    },
    yAxis: {
        lineColor:'#000',
        lineWidth:.5,
        tickWidth:.5,
        tickLength:3,
        tickColor:'#000',
        gridLineWidth:.5,
        gridLineColor:'#eee',
        title: {
            text: 'Y Axis',
            rotation:0,
            style: {
                color:'#000',
                fontSize:'.8em'
            }
        }
    },
    series:[]
};
$('#container').highcharts(options);
var chart = $('#container').highcharts();
chart.addSeries({
    type:'line',
    name:'Series A',
    data:data1
});
chart.addSeries({
    showInLegend:false,
    visible:false,
    type:'column',
    name:'Series B',
    data:data2
});
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/highcharts-more.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="height:400px;margin:1.5em 1em;"></div>  
   </body>
</html>

Related Tutorials