Highcharts Demo

author(s): Torstein Hønsi

by Chitkala More

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; min-width: 310px"></div>

CSS

.highcharts-range-selector-buttons {
  visibility: hidden;
}

JavaScript

const changeText = function(chart, e) {
  chart.exporting.update({
    buttons: {
      toggle: {
        text: e.target.textContent
      }
    }
  })
}

$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
  Highcharts.stockChart('container', {
    exporting: {
      buttons: {
        contextButton: {
          enabled: false
        },
        toggle: {
          text: 'Select range',
          align: 'left',
          height: 20,
          y: -3,
          theme: {
            'stroke-width': 0.5,
            stroke: '#000000',
            r: 2
          },
          menuItems: [{
            text: '1M',
            onclick: function(e) {
              changeText(this, e)
              this.rangeSelector.clickButton(0, true);
            }
          }, {
            text: '3M',
            onclick: function(e) {
              changeText(this, e)
              this.rangeSelector.clickButton(1, true);
            }
          }, {
            text: '6M',
            onclick: function(e) {
              var chart = this;
              changeText(this, e)
              this.rangeSelector.clickButton(2, true);
            }
          }, {
            text: 'YTD',
            onclick: function(e) {
              changeText(this, e)
              this.rangeSelector.clickButton(3, true);
            }
          }, {
            text: '1Y',
            onclick: function(e) {
              changeText(this, e)
              this.rangeSelector.clickButton(4, true);
            }
          }, {
            text: 'All',
            onclick: function(e) {
              changeText(this, e)
              this.rangeSelector.clickButton(5, true);
            }
          }]
        }
      }
    },
    series: [{
      data: data
    }]
  });
});