score:2

Accepted answer

this can be achieved via a custom plugin making direct draw calls to the canvas, an example of which i've included below. note that the code makes a lot of assumptions based on your screenshot and should be considered as a starting point rather than a perfect drop-in solution.

let mychart = new chart(document.getelementbyid('chart'), {
  type: 'line',
  data: {
    labels: ['a', 'b', 'c', 'd', 'e', 'f', 'g'],
    datasets: [{
      label: 'group1',
      data: [-1000, -2000, -2000, -3000, -4000, -3000, -5000],
      backgroundcolor: '#f48496'
    }, {
      label: 'group2',
      data: [-4000, -4000, -3000, -6000, -6000, -5000, -9000],
      backgroundcolor: '#61b2e9'
    }]
  },
  options: {
    maintainaspectratio: false,
    layout: {
      padding: {
        right: 100
      }
    },
    scales: {
      yaxes: [{
        ticks: {
          beginatzero: true
        }
      }]
    }
  },
  plugins: {
    afterrender: function(c) {
      let
        // calculate difference between values of last two points in first and second datasets.
        d = c.config.data.datasets[0].data[c.config.data.datasets[0].data.length - 1] - c.config.data.datasets[1].data[c.config.data.datasets[1].data.length - 1],
        // position of last point in first dataset.
        xy0 = c.getdatasetmeta(0).data[c.getdatasetmeta(0).data.length - 1]._model,
        // position of last point in second dataset.
        xy1 = c.getdatasetmeta(1).data[c.getdatasetmeta(1).data.length - 1]._model;

      c.ctx.save();

      // draw the line.
      c.ctx.strokestyle = 'black';
      c.ctx.beginpath();
      c.ctx.moveto(xy0.x + 10, xy0.y);
      c.ctx.lineto(xy0.x + 15, xy0.y); // draw the upper horizontal line.
      c.ctx.lineto(xy0.x + 15, xy1.y); // draw the vertical line.
      c.ctx.lineto(xy1.x + 10, xy1.y); // draw the lower horizontal line.
      c.ctx.stroke();

      // draw the text.
      c.ctx.font = '20px sans-serif';
      c.ctx.fillstyle = 'black';
      c.ctx.filltext(
        d, // text
        c.chartarea.right + 25, // text x position
        xy0.y + ((xy1.y - xy0.y) / 2) // text y position
      );

      c.ctx.restore();
    }
  }
});
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.7.2/chart.min.js"></script>
<canvas id="chart"></canvas>


Related Query

More Query from same tag