JSFiddle - React, Tailwind, and code Playground

by katsukino

HTML

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

JavaScript

var data = [];
var arrowCoordinates = {}; //coordinates to draw the arrow
var chart = new CanvasJS.Chart("chartContainer", {
  theme: "light2",
  zoomEnabled: true,
  rangeChanged: function(e) {
    drawArrow(chart);
  },
  title: {
    text: "Draw line on chart from the first data point to the last data point"
  },  
  data: data
});

addDataAndArrow();

function addDataAndArrow() {

  var limit = 1000;    //increase number of dataPoints by increasing this

  var y = 0;
  var dataSeries = { type: "line" };
  var dataPoints = [];
  for (var i = 0; i < limit; i += 1) {
    y += (Math.random() * 10 - 5);
    dataPoints.push({
      x: i,
      y: y                
    });
  }
  dataSeries.dataPoints = dataPoints;
  data.push(dataSeries);
  chart.render();
  drawArrow(chart);
}

function drawArrow( chart ) {

  var viewportMinimum = chart.axisX[0].get("viewportMinimum");
  var viewportMaximum = chart.axisX[0].get("viewportMaximum");
  var minimumDPSValue = 0, maximumDPSValue = 0;

  for(var i = 0; i < chart.options.data[0].dataPoints.length; i++) {
    if(chart.options.data[0].dataPoints[i].x > viewportMinimum ) {
      minimumDPSValue = i
      break;
    }
  }
  minimumDPSValue = 0;

  for(var i = chart.options.data[0].dataPoints.length - 1; i > 0; i--) {
    if(chart.options.data[0].dataPoints[i].x < viewportMaximum ) {
      maximumDPSValue = i
      break;
    }
  }
  maximumDPSValue = chart.options.data[0].dataPoints.length-1;
  
  arrowCoordinates.x1 = chart.axisX[0].convertValueToPixel(chart.options.data[0].dataPoints[minimumDPSValue].x);
  arrowCoordinates.y1 = chart.axisY[0].convertValueToPixel(chart.options.data[0].dataPoints[minimumDPSValue].y);
  arrowCoordinates.x2 = chart.axisX[0].convertValueToPixel(chart.options.data[0].dataPoints[maximumDPSValue].x);
  arrowCoordinates.y2 = chart.axisY[0].convertValueToPixel(chart.options.data[0].dataPoints[maximumDPSValue].y);

  var ctx = chart.ctx;
  var xDistance = arrowCoordinates.x2 - arrowCoordinates.x1;
 ...