[Chartjs]-Chart js custom canvas draw against charts update

by

1👍

✅

You will need to use the plugin system, this will make it so you always can draw on the canvas in the right time without it being wiped

var ctx = document.getElementById("chart").getContext("2d");
var myLine = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["label1", "label2", "label3", "label4"],
    datasets: [{
      label: 'Demo',
      data: [-2, -3, 4, 6],
    }]
  },
  options: {},
  plugins: [{
    id: 'customText',
    afterDraw: (chart) => {
      chart.ctx.fillText("Hello World!", 30, 50);
    }
  }]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.0/chart.umd.js"></script>
<canvas id="chart"></canvas>

Leave a comment