Highcharts Demo

author(s): Torstein Hønsi

by pawel_dalek

HTML

<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"></div>

JavaScript

function updateLegendLabel() {
  var chrt = !this.chart ? this : this.chart;
  chrt.update({
    legend: {
      labelFormatter: function() {
        var lastVal = this.yData[this.yData.length - 1],
          chart = this.chart,
          xAxis = this.xAxis,
          points = this.points,
          avg = 0,
          counter = 0,
          min, minPoint, max, maxPoint;

        points.forEach(function(point, inx) {
          if (point.isInside) {
            if (!min || min > point.y) {
              min = point.y;
              minPoint = point;
            }

            if (!max || max < point.y) {
              max = point.y;
              maxPoint = point;
            }

            counter++;
            avg += point.y;
          }
        });
        avg /= counter;

        return this.name + '<br>' + 'Now: ' + lastVal + ' °C<br>' +
          '<span style="color: red">Min: ' + min + ' °C</span><br/>' +
          '<span style="color: red">Max: ' + max + ' °C</span><br/>' +
          '<span style="color: red">Average: ' + avg.toFixed(2); + ' °C</span><br/>';
      }
    }
  });
}

Highcharts.stockChart('container', {
  chart: {
    zoomType: 'x',
    events: {
      load: updateLegendLabel
    }
  },
  rangeSelector: {
    selected: 0
  },
  legend: {
    enabled: true
  },
  xAxis: {
    events: {
      afterSetExtremes: updateLegendLabel
    }
  },
  plotOptions: {
    series: {
      animation: false
    }
  },
  series: [{
    name: 'Outside',
    data: [
      [Date.UTC(2016, 01, 01), 0.2],
      [Date.UTC(2016, 01, 06), -1.4],
      [Date.UTC(2016, 01, 11), -2.6],
      [Date.UTC(2016, 01, 16), 11.1],
      [Date.UTC(2016, 01, 21), -11.1],
      [Date.UTC(2016, 01, 26), 3.7],
      [Date.UTC(2016, 02, 01), 4.9],
      [Date.UTC(2016, 02, 06), 8.2],
      [Date.UTC(2016, 02, 11), 0.2],
      [Date.UTC(2016, 02, 16), -1.4],
      [Date.UTC(2016, 02, 21), -2.6],
      [Date.UTC(2016, 02, 26), -5.1],
      [Date.UTC(2016, 03, 01), -8.3],
     ...