javascripthtmlcanvaschart.js

Add watermark/logo to Chart.js


I've been looking through docs and other SO posts, but it seems this hasn't been asked before.

Is there any way to add a watermark or logo to a chart made with Chart.js?

I need this mainly for when people download the chart as an image, I don't care too much whether it shows up on my website or not, as long as it's there when the user downloads it.

Can anybody point me to the right direction?

Thank you very much! :)


Solution

  • I'm sorry for finding an answer myself minutes after posting the question, but for the life of me I couldn't find this before :(

    This Chart.js plugin will do exactly that: https://www.npmjs.com/package/chartjs-plugin-watermark

    options: {
    
          watermark: {
    
              image: "//imgurlhere.jpg",
              x: 20,
              y: 10,
              width: 53,
              height: 60,
              opacity: 0.25,
              alignX: "left",
              alignY: "top",
              alignToChartArea: true,
              position: "back"
    
          },
    
    }