Set left and right border-like for stock chart - Javascript highcharts

Javascript examples for highcharts:Stock Chart

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

Description

Set left and right border-like for stock chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/stock/highstock.js"></script> 
      <script src="https://code.highcharts.com/stock/modules/exporting.js"></script> 
      <script src="https://code.highcharts.com/stock/modules/export-data.js"></script> 
      <div id="container" style="height: 400px; min-width: 310px"></div> 
      <script type="text/javascript">
Highcharts.setOptions({//from   w w  w. j  ava 2  s .  c  o  m
  global: {
    useUTC: false
  }
});
// Create the chart
var chart = Highcharts.stockChart('container', {
  chart: {
    events: {
      load: function() {
        var series = this.series[0];
        var xAxis = this.xAxis[0];
        setInterval(function() {
          var x = (new Date()).getTime(), // current time
            y = Math.round(Math.random() * 100);
          series.addPoint([x, y], true, true);
          xAxis.update({
            plotLines: [{
              value: x - 60000,
              color: '#f2f2f2',
              width: 1
            }, {
              value: x,
              color: '#f2f2f2',
              width: 1
            }]
          });
        }, 1000);
      }
    }
  },
  yAxis: {
     gridLineWidth: 0,
  },
  xAxis: {
    plotLines: [{
      value: (new Date()).getTime() - 60000,
      color: '#f2f2f2',
      width: 1
    }, {
      value: (new Date()).getTime(),
      color: '#f2f2f2',
      width: 1
    }]
  },
  rangeSelector: {
    buttons: [{
      count: 1,
      type: 'minute',
      text: '1M'
    }, {
      count: 5,
      type: 'minute',
      text: '5M'
    }, {
      type: 'all',
      text: 'All'
    }],
    inputEnabled: false,
    selected: 0
  },
  title: {
    text: 'Live random data'
  },
  exporting: {
    enabled: false
  },
  series: [{
    name: 'Random data',
    data: (function() {
      // generate an array of random data
      var data = [],
        time = (new Date()).getTime(),
        i;
      for (i = -999; i <= 0; i += 1) {
        data.push([
          time + i * 1000,
          Math.round(Math.random() * 100)
        ]);
      }
      return data;
    }())
  }]
});

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

Related Tutorials