[Chartjs]-Chart.js โ€“ line chart โ€“ can I visualize positive/negative change somehow?

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>

Leave a comment