How to add a watermark to your chart
There are two ways to watermark your chart:
Option 1: Background image
Use the backgroundImageUrl Chart.js plugin. This will place an image in the background of your chart. You can supply a watermark image that contains, for example, the logo of your company.
See background image documentation and an example chart.
{
type: 'bar',
data: {
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
datasets: [
{ label: 'Users', data: [50, 60, 70, 180] },
],
},
options: {
plugins: {
backgroundImageUrl:
'https://www.msoutlook.info/pictures/bgconfidential.png',
},
},
}
Option 2: Watermark API
The watermark API is more flexible and provides more customization options. Supply the chart URL as the mainImageUrl query parameter, and supply a separate watermark image as markImageUrl. This option is more customizable.
Here's an example chart created using the watermark API technique:
As you can see, we've set mainImageUrl, markImageUrl, and a couple other optional parameters:
https://quickchart.io/watermark?mainImageUrl=https%3A%2F%2Fquickchart.io%2Fchart%3Fc%3D%257B%250A%2520%2520type%253A%2520%2527bar%2527%252C%250A%2520%2520data%253A%2520%257B%250A%2520%2520%2520%2520labels%253A%2520%255B%2527Q1%2527%252C%2520%2527Q2%2527%252C%2520%2527Q3%2527%252C%2520%2527Q4%2527%255D%252C%250A%2520%2520%2520%2520datasets%253A%2520%255B%257B%250A%2520%2520%2520%2520%2520%2520label%253A%2520%2527Users%2527%252C%250A%2520%2520%2520%2520%2520%2520data%253A%2520%255B50%252C%252060%252C%252070%252C%2520180%255D%250A%2520%2520%2520%2520%257D%255D%250A%2520%2520%257D%250A%257D&markImageUrl=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2F3%2F36%2FSeal_of_the_President_of_the_United_States.svg%2F200px-Seal_of_the_President_of_the_United_States.svg.png&markRatio=0.5&position=center&opacity=0.2&margin=0&imageWidth=500
tip
Be sure to URL-encode your mainImageUrl and markImageUrl parameters.