JSFiddle - React, Tailwind, and code Playground

by katsukino

HTML

<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

window.onload = function() {
  var chart = new CanvasJS.Chart("chartContainer",
                                 {
    title: {
      text: "Arrow over the last dataPoint"
    },

    data: [
      {
        type: "scatter",
        markerSize: 20,
        dataPoints: [
          { x: 10, y: 1100 },
          { x: 20, y: 1200 },
        ]
      }
    ]
  });

  chart.render();

  var canvas = document.querySelector('.canvasjs-chart-canvas');
  var ctx = canvas.getContext('2d');

  drawArrow(2, 'green');
  window.onresize = function() {
    drawArrow(2, 'green');
  }

  // Arrow function
  function drawArrow(arrowWidth, color) {
    var arrowXEnd = chart.axisX[0].convertValueToPixel(chart.options.data[0].dataPoints[1].x);
    var arrowYEnd = chart.axisY[0].convertValueToPixel(chart.options.data[0].dataPoints[1].y + 10);

    var arrowXStart = chart.axisX[0].convertValueToPixel(chart.options.data[0].dataPoints[1].x);
    var arrowYStart = chart.axisY[0].convertValueToPixel(chart.options.data[0].dataPoints[1].y + 40);
    var headlen = 10;
    var angle = Math.atan2(arrowYEnd - arrowYStart, arrowXEnd - arrowXStart);

    ctx.save();
    ctx.strokeStyle = color;

    ctx.beginPath();
    ctx.moveTo(arrowXStart, arrowYStart);
    ctx.lineTo(arrowXEnd, arrowYEnd);
    ctx.lineWidth = arrowWidth;
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(arrowXEnd, arrowYEnd);
    ctx.lineTo(arrowXEnd + 5, arrowYEnd - 5);
    ctx.lineTo(arrowXEnd - 5, arrowYEnd - 5);
    ctx.closePath();
    ctx.stroke();

    ctx.restore();
  }
}