first point on xAxis - Javascript highcharts

Javascript examples for highcharts:Chart Axis

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

Description

first point on xAxis

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-git.js"></script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 
      <button id="btnClck">Update</button> 
      <script type="text/javascript">
options = {/*from   www.  j a  v  a2s.c om*/
  title: {
    text: 'simple chart'
  },
  series: [{
    data: [29.9, 71.5, 106.4, 129.2],
    pointInterval: 24 * 3600 * 1000,
    pointStart: Date.UTC(2015, 1, 12) // feb 12, 2015
  }],
  xAxis: {
    type: 'datetime',
    minPadding: 0.015,
    dateTimeLabelFormats: {
      minute: '%H:%M',
      hour: '%H:%M',
      day: '%e. %b',
      week: '%e. %b',
      month: '%b \'%y',
      year: '%Y'
    }
  }
};
var chart = Highcharts.chart('container', options);
$('#btnClck').bind('click', function() {
  let pointStart = new Date(Date.UTC(2015, 1, 12));
  let year = pointStart.getFullYear();
  let month = pointStart.getMonth() + 1;
  let day = pointStart.getDate();
  let hours = pointStart.getHours();
  let minutes = pointStart.getMinutes();
  chart.series[0].update({
    data: [30, 41, 47, 52],
    pointStart: Date.UTC(year, month, day, hours, minutes, 0),
    pointInterval: 24 * 3600 * 1000
  }, true);
});

      </script>  
   </body>
</html>

Related Tutorials