Highstock step multiple data points on same x axis - Javascript highcharts

Javascript examples for highcharts:Chart Axis

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

Description

Highstock step multiple data points on same x axis

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.jquery.com/jquery-3.1.1.min.js"></script> 
      <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> 
      <script type="text/javascript">
const data = [//from  w w  w .  j  av  a 2  s .c  o  m
  [0, 0],
  [0, 100],
  [1, 100],
  [1, 200],
  [1, 300],
  [2, 400],
  [2, 450],
  [3, 450],
  [3, 600],
  [4, 600],
  [4, 800]
];
const processedData = data.reduce((processedData, point) => {
  const x = point[0],
    data = processedData[x];
  if (data) {
    data.values.push(point[1]);
    data.y = Math.max.apply(null, data.values);
  } else {
    processedData.push({
      x: x,
      values: [point[1]]
    });
  }
  return processedData;
}, []);
const chart = Highcharts.stockChart('container', {
  rangeSelector: {
    selected: 1
  },
  title: {
    text: 'test'
  },
  legend: {
    enabled: true
  },
  xAxis: {
    minRange: 1,
    events: {
      afterSetExtremes: function(e) {
        const data = this.series[0].data.filter(point => point.isInside);
        const maxPoint = data.reduce((a, b) => a.y > b.y ? a : b);
        const minPoint = data.reduce((a, b) => a.y < b.y ? a : b);
        const max = Math.max.apply(null, maxPoint.options.values);
        const min = Math.min.apply(null, minPoint.options.values);
        const diff = max - min;
        chart.update({
          legend: {
            labelFormat: String(diff)
          }
        });
      }
    }
  },
  series: [{
    step: true,
    name: 'test',
    data: processedData,
    tooltip: {
      valueDecimals: 2
    }
  }]
});

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

Related Tutorials