Highcharts Stock Demo

author(s): Torstein Hønsi

HTML

<div id="container" style="height: 400px; min-width: 600px"></div>

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://www.highcharts.com/samples/data/usdeur.js"></script>

JavaScript

function togglePlotbands() {
  this.plotLinesAndBands.forEach(plotband => {
    const { plotLeft, plotWidth } = this.chart
    const from = Math.max(this.toPixels(plotband.options.from), plotLeft)
    const to = Math.min(this.toPixels(plotband.options.to), plotLeft + plotWidth)

    const plotbandWidth = to - from
    const show = plotband.label.getBBox().width < plotbandWidth

    plotband.label.css({ opacity: Number(show) })
  })
}

Highcharts.stockChart('container', {
  chart: {
    events: {
      load: function() {
        togglePlotbands.call(this.xAxis[0])
      }
    }
  },

  xAxis: {
    plotBands: [{
      from: Date.UTC(2014, 10, 0),
      to: Date.UTC(2015, 7, 0),
      color: 'yellow',
      label: {
        text: 'text text text text text text text text text'
      }
    }],

    events: {
      afterSetExtremes: togglePlotbands
    }
  },

  rangeSelector: {
    selected: 1
  },

  series: [{
    name: 'USD to EUR',
    data: usdeur
  }]
});