Highcharts Demo

author(s): Torstein Hønsi

by wchmiel

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>
<button id="export">Export Chart</button>

JavaScript

var chart;


$.getJSON('https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/usdeur.json', function(data) {

  // Create the chart
  chart = Highcharts.stockChart('container', {


    rangeSelector: {
      selected: 0
    },

    title: {
      text: 'USD to EUR exchange rate'
    },

    tooltip: {
      style: {
        width: '200px'
      },
      valueDecimals: 4,
      shared: true
    },

    yAxis: {
      title: {
        text: 'Exchange rate'
      }
    },
    plotOptions: {
      series: {
        cursor: 'pointer',
        point: {
          events: {
            click: function(e) {
              drawRectangle(e);
            }
          }
        }
      }
    },

    series: [{
      name: 'USD to EUR',
      data: data,
      id: 'dataseries'


    }]
  });
});


var rectSvgColl = [];

function drawRectangle(e) {
  var rectAttr = {
    fill: '#f44242',
    stroke: 'green',
    'stroke-width': 5,
    zIndex: 99
  };

  chart.renderer.rect(e.clientX, e.clientY, 50, 50).attr(rectAttr).add();

  rectSvgColl.push({
    x: e.clientX,
    y: e.clientY,
    height: 50,
    width: 50,
    attr: rectAttr
  });
}

$("#export").click(function() {
  chart.exportChart(null, {
    chart: {
      events: {
        load: function() {
          var self = this;
          rectSvgColl.forEach(function(elem) {
            console.log(elem.attr);
            self.renderer.rect(elem.x, elem.y, elem.width, elem.height)
              .attr(elem.attr)
              .add();
          });
        }
      }
    }
  });
});