Skip to main content

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.

Chart URL: https://quickchart.io/chart?c={ type: 'bar', data: { labels: ['Q1', 'Q2', 'Q3', 'Q4'], datasets: [ { label: 'Users', data: [50, 60, 70, 180] }, ], }...
A chart with a background image

Open in full editor

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:

An image watermarked with the API

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.