79189533

Date: 2024-11-14 16:02:02
Score: 0.5
Natty:
Report link

Add watermark to ChartJS 4.4.6:

const myCustomPlugins = {
    // beforeDraw or afterDraw
    beforeDraw:function(chartInstance){
        // Get ctx of chart
        const context = chartInstance.ctx;
        // Set backgournd color for chart
        context.fillStyle = "white";
        // Set sizes and positions
        context.fillRect(0, 0, context.canvas.width, context.canvas.height);
        // Create new image
        let img = new Image();
        // Set srouce of image
        img.src = "assets/images/watermark.svg";
        // Draw the image on the canvas context
        context.drawImage(img,context.canvas.width/4-img.width/2,context.canvas.height/4-img.height/2);
    }
}

new Chart(document.getElementById('myChart'),{

     // Set your chart type, chart data, chart options here 

     plugins: [myCustomPlugins]
});

https://www.chartjs.org/docs/latest/developers/plugins.html

Reasons:
  • Probably link only (1):
  • Long answer (-0.5):
  • Has code block (-0.5):
  • Low reputation (0.5):
Posted by: ramin