6๐
โ
Your question seemed pretty interesting. So, I went ahead and created the following chart plugin, which will get the job done โฆ
Chart.plugins.register({
afterDatasetsDraw: function(c) {
let ctx = c.ctx;
let prevY;
c.data.datasets.forEach(function(e, i) {
let meta = c.getDatasetMeta(i);
if (meta.hidden) return;
meta.data.forEach(function(e) {
let x = e.tooltipPosition().x;
let y = e.tooltipPosition().y;
let radius = e._model.radius;
let moveY = prevY && (y < prevY ? y - (radius * 3) : y + (radius * 3));
let lineY = prevY && (y < prevY ? y - (radius * 2) : y + (radius * 2));
let color = prevY && (y < prevY ? 'green' : 'red');
// draw arrow
ctx.save();
ctx.fillStyle = color;
ctx.beginPath();
ctx.moveTo(x, moveY);
ctx.lineTo(x + radius, lineY);
ctx.lineTo(x - radius, lineY);
ctx.closePath();
ctx.fill()
ctx.restore();
prevY = y;
})
});
}
});
แด แดแดแด
Chart.plugins.register({
afterDatasetsDraw: function(c) {
let ctx = c.ctx;
let prevY;
c.data.datasets.forEach(function(e, i) {
let meta = c.getDatasetMeta(i);
if (meta.hidden) return;
meta.data.forEach(function(e) {
let x = e.tooltipPosition().x;
let y = e.tooltipPosition().y;
let radius = e._model.radius;
let moveY = prevY && (y < prevY ? y - (radius * 3) : y + (radius * 3));
let lineY = prevY && (y < prevY ? y - (radius * 2) : y + (radius * 2));
let color = prevY && (y < prevY ? 'green' : 'red');
// draw arrow
ctx.save();
ctx.fillStyle = color;
ctx.beginPath();
ctx.moveTo(x, moveY);
ctx.lineTo(x + radius, lineY);
ctx.lineTo(x - radius, lineY);
ctx.closePath();
ctx.fill()
ctx.restore();
prevY = y;
})
});
}
});
var canvas = document.getElementById('myChart');
var data = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
datasets: [{
label: "My First Dataset",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 5,
pointHitRadius: 10,
data: [65, 59, 80, 40, 56, 55, 40],
}]
};
var option = {
responsive: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
max: 100,
stepSize: 20
}
}]
}
};
var myLineChart = Chart.Line(canvas, {
data: data,
options: option
});
function adddata() {
myLineChart.data.datasets[0].data[7] = 50;
myLineChart.data.labels[7] = "test add";
myLineChart.update();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="myChart" height="200"></canvas>
Source:stackexchange.com