Create a SVG object with a arrow line on chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Line Chart

Description

Create a SVG object with a arrow line on chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="width: 2310px; height: 400px; margin: 0 auto"></div> 
      <script type="text/javascript">
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function(data) {
  var callout = function(chart) {
    $('.cO').remove();
    var xAxis = chart.xAxis[0],/*w w w  .ja v a2 s  . c  o  m*/
      yAxis = chart.yAxis[0],
      point = chart.series[0].data[100],
      x = xAxis.toPixels(point.x),
      y = yAxis.toPixels(point.y),
      lineXLength = 50,
      lineYLength = -150;
    const label = chart.renderer.label('Custom label', xAxis.toPixels(point.x) + lineXLength, yAxis.toPixels(point.y) + lineYLength, 'rect')
      .css({
        color: '#FFFFFF'
      })
      .attr({
        fill: 'rgba(0, 0, 0, 0.75)',
        padding: 8,
        r: 5,
        width: 100,
        height: 30,
        zIndex: 6
      }).addClass('cO')
      .add();
      const x0 = label.x;
      const y0 = label.y + label.height / 2;
      const x1 = x;
      const y1 = y;
      const path = chart.renderer.path([
        'M', label.x, label.y + label.height / 2,
        'L', x, y,
      ]).attr({
        'stroke-width': 1,
        stroke: 'black',
        zIndex: 6
      }).add()
      const array = [[x1 - 5, y1 - 15], [x1 + 5, y1 - 15], [x1, y1], [x1 - 5, y1- 15]]
      const angle = Math.atan2(y0 - y1, x0 - x1) + 90 * Math.PI / 180;
      const ma = array.map(point => rotatePoint(array[2], angle, point));
      const arrow = chart.renderer.path({
        fill: 'black',
        zIndex: 6,
        d: ['M', ma[0].join(' '), 'L', ma[1].join(' '), ma[2].join(' '), ma[3].join(' ')].join(' ')
      }).add()
  };
  function rotatePoint(c, angle, p) {
    const sin = Math.sin(angle);
    const cos = Math.cos(angle);
    const x = p[0] - c[0];
    const y = p[1] - c[1];
    const nx = x * cos - y * sin;
    const ny = x * sin + y * cos;
    return [nx + c[0], ny + c[1]];
  }
  Highcharts.chart('container', {
    chart: {
      events: {
        load: function() {
          callout(this);
        },
        redraw: function() {
          callout(this);
        }
      }
    },
    xAxis: {
      type: 'datetime'
    },
    legend: {
      enabled: false
    },
    series: [{
      data: data
    }]
  });
});

      </script>  
   </body>
</html>

Related Tutorials