JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.js"></script>
<canvas id="tempo" width="440" height="240"></canvas>
JavaScript
var aa = [1,2,3,4,15,6,7,8,9,10]
var ab = [1,2,3,4,5,6,7,8,9,10]
function tmp(valor, vt){
var maior = 0;
var indexNew = 0;
var ultimoarray = valor[0];
var negacao;
var array_diferença_pcr = [];
for (var i = 0; i < valor.length; i++) {
negacao = valor[i] - ultimoarray;
array_diferença_pcr.push(negacao);
//console.log(negacao)
if(maior < negacao){
maior = negacao;
indexNew = i;
//console.log(maior+' - '+indexNew)
}
ultimoarray = valor[i];
//console.log(ultimoarray)
}
var originalLineDraw = Chart.controllers.line.prototype.draw;
Chart.helpers.extend(Chart.controllers.line.prototype, {
draw: function() {
originalLineDraw.apply(this, arguments);
var chart = this.chart;
var ctx = chart.chart.ctx;
var index = chart.config.data.lineAtIndex;
if (index) {
var xaxis = chart.scales['x-axis-0'];
var yaxis = chart.scales['y-axis-0'];
//console.log(xaxis.width)
ctx.save();
ctx.beginPath();
ctx.moveTo(xaxis.getPixelForValue(undefined, index), yaxis.top);
ctx.strokeStyle = '#ff0000';
ctx.lineTo(xaxis.getPixelForValue(undefined, index), yaxis.bottom);
ctx.stroke();
ctx.restore();
ctx.save();
ctx.beginPath();
//ctx.textBaseline="middle";
ctx.textAlign = 'right';
ctx.fillStyle = 'red';
ctx.fillText("ROTATE", xaxis.getPixelForValue(undefined, index) -6, yaxis.top + 1.5);
ctx.restore();
}
}
});
data = {
type: 'line',
data: {
labels: vt,
datasets: [{
type: 'line',
label: 'A',
data:valor ,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 159, 64, 1)',
borderWidth: 1
},
{
type: 'line',
label:...