score:1

Accepted answer

you can write a custom plugin for this, i added padding on the right to give space for the arrow to be drawn. you can play with the multiplyer values to make the arrow bigger/smaller

example:

var randoms = [...array(11)].map(e => ~~(math.random() * 11));
var ctx = document.getelementbyid("mychart");
var mychart = new chart(ctx, {
  type: 'line',
  data: {
    labels: randoms,
    datasets: [{
      label: 'value',
      data: randoms,
      bordercolor: 'red',
      backgroundcolor: 'red'
    }]
  },
  options: {
    layout: {
      padding: {
        right: 25
      }
    },
    scales: {
      y: {
        grace: 10
      }
    }
  },
  plugins: [{
    id: 'arrow',
    afterdraw: (chart, args, opts) => {
      const {
        ctx
      } = chart;
      chart._metasets.foreach((meta) => {
        let point = meta.data[meta.data.length - 1];
        ctx.save();
        ctx.fillstyle = point.options.backgroundcolor;
        ctx.moveto(point.x, (point.y - point.y * 0.035));
        ctx.lineto(point.x, (point.y + point.y * 0.035));
        ctx.lineto((point.x + point.x * 0.025), point.y)
        ctx.fill();
        ctx.restore();
      })
    }
  }]
});

function populate() {
  let temp = ~~(math.random() * 11);
  mychart.data.datasets[0].data.shift();
  mychart.data.datasets[0].data.push(temp);

  mychart.update();
}

//setinterval(populate, 10000);
<script src="https://npmcdn.com/chart.js@latest/dist/chart.min.js"></script>
<div class="mychartdiv">
  <canvas id="mychart" width="600" height="400"></canvas>
</div>


Related Query

More Query from same tag