Highcharts Demo

author(s): Torstein Hønsi

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>

JavaScript

function translate (x, y, chart, toPixels) {
  const xAxis = chart.xAxis[0]
  const yAxis = chart.yAxis[0]
  let tx, ty, hide
  
  if (toPixels) {
    tx = xAxis.toPixels(x)
    ty = yAxis.toPixels(y)
    
    if (tx < xAxis.left || tx > xAxis.left + xAxis.width) {
       hide = true
     } else if (!hide && (ty < yAxis.top || ty > yAxis.top + yAxis.height)) {
       hide = true
     }
     
     if (hide) {
       tx = -9e7
       ty = -9e7
     }
  } else {
    tx = xAxis.toValue(x)
    ty = yAxis.toValue(y)
  }    

  return { x: tx, y: ty }
}

$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
    // Create the chart
    Highcharts.stockChart('container', {
         chart: {
           events: {
             load: function () {
               this.drawnItems = []
             },
             click: function (e) {
               const { x, y } = e
               const text = this.renderer.text('custom text', x, y).add()
               text.point = translate(x, y, this)
               this.drawnItems.push(text)
             },
             redraw: function () {
               this.drawnItems.forEach(item => {
                 const { x, y } = item.point
                 item.attr(translate(x, y, this, true))
               })
             }
           }
         },

        title: {
            text: 'AAPL Stock Price'
        },

        series: [{
            name: 'AAPL',
            data: data,
            tooltip: {
                valueDecimals: 2
            }
        }]
    });
});