Chartjs-I am trying to use the Chartjs-plugin-watermark but it is not working

by

0👍

What looks like the main reason that it’s not working is because this plugin was written for V2 and you are using V3, the way you register plugins has changed so you need to change this line which can be found at the bottom of the file: Chart.pluginService.register(watermarkPlugin); to this: Chart.register(watermarkPlugin)

0👍

Since this question was posted, chartjs-plugin-watermark 2.0.0 has been released and supports Chart.js 3 and 4. Additionally, the watermark config should be moved from options.plugins.watermark to just options.watermark:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/AlbinoDrought/chartjs-plugin-watermark/chartjs-plugin-watermark.js"></script>
</head>
<body onLoad="ready()">
<canvas id="myChart" width="250" height="200"></canvas>
<script>

  var ctx = document.getElementById("myChart");

  var imageNew = new Image()
  imageNew.src = 'https://image.shutterstock.com/image-vector/hi-hello-banner-speech-bubble-260nw-1505210795.jpg'
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: [1880,
1881,
1882,
1883,
1884,
1885,
1886
],
      datasets: [{
        label: 'Temperature Anomaly',
        data: [-0.16,
-0.08,
-0.1,
-0.17,
-0.28,
-0.33,
-0.31
],
fill: true,
        backgroundColor: [
          'rgba(10, 168, 196, 0.2)',
          'rgba(102, 96, 151, 0.2)',
          'rgba(57, 87, 255, 0.2)',
          'rgba(233, 182, 233, 0.2)',
          'rgba(108, 213, 207, 0.2)',
          'rgba(125, 178, 230, 0.2)'
        ],
        borderColor: [
          'rgba(10, 168, 196, 1)',
          'rgba(102, 96, 151, 1)',
          'rgba(57, 87, 255, 1)',
          'rgba(233, 182, 233, 1)',
          'rgba(108, 213, 207, 1)',
          'rgba(125, 178, 230, 1)'
        ],
        borderWidth: 1,
pointRadius: 3,
pointHitRadius: 8
      }]
    },
    options: {
      scales: {
        y: [{
          ticks: {
            beginAtZero: true,
             callback: function(value, index, values) {
               return value + '°C';
             }
          },
          title: {
            display: true,
            text: 'Test'
          }
        }],
        xAxes: [{
          ticks: {
                maxTicksLimit: 15
            }
          }]
      },
      plugins:{
        legend: {display: false},
      },
      watermark: {
          x: 0,
          y: 0,

          height: 50,
          width: 50,

          alignX: "top",
          alignY: "left",
          alignToChartArea: true,

          position: "front",

          opacity: 1,

          image: imageNew,
      },
      onClick: handleClick
    }
  });

  window.onmessage = function(event){

    if (event.data && Array.isArray(event.data)) {
      myChart.data.datasets[0].data = event.data;
      myChart.update();
    }
    else {
      console.log("HTML Code Element received a generic message:");
      console.log(event.data);
    }
  };

  function handleClick(e){
    var activeBars = myChart.getElementAtEvent(e);

    var value = myChart.config.data.datasets[activeBars[0]._datasetIndex].data[activeBars[0]._index];
    var label = activeBars[0]._model.label;

    window.parent.postMessage({
      "type":"click",
      "label":label,
      "value":value
    } , "*");
  }

  function ready(){
    window.parent.postMessage({"type":"ready"}, "*");
  }

</script>

</body>
</html>

Leave a comment