A simple watermark plugin for Chart.js

Downloads in past


2.0.27 months ago7 years agoMinified + gzip package size for chartjs-plugin-watermark in KB


npm version Build Status: Node.js CI
A simple watermark plugin for Chart.js 3 and 4.
For Chart.js 2, use version ^1
View samples on Github Pages


Using NPM

npm i chartjs-plugin-watermark

import { Chart } from 'chart.js'
import ChartjsPluginWatermark from 'chartjs-plugin-watermark'


Using CDN

Plugin will automatically register if their is a global Chart.js instance available.
<script src=""></script>
<script src="../chartjs-plugin-watermark.min.js"></script>


To configure the watermark plugin, add these options to your chart config:
    // container for watermark options
    watermark: {
        // the image you would like to show
        // alternatively, this can be of type "Image"
        image: "",
        // x and y offsets of the image
        x: 50,
        y: 50,
        // width and height to resize the image to
        // image is not resized if these values are not set
        width: 108,
        height: 39,
        // opacity of the image, from 0 to 1 (default: 1)
        opacity: 0.1,
        // x-alignment of the image (default: "left")
        // valid values: "left", "middle", "right"
        alignX: "right",
        // y-alignment of the image (default: "top")
        // valid values: "top", "middle", "bottom"
        alignY: "bottom",
        // if true, aligns the watermark to the inside of the chart area (where the lines are)
        // (where the lines are)
        // if false, aligns the watermark to the inside of the canvas
        // see samples/alignToChartArea.html
        alignToChartArea: false,
        // determines whether the watermark is drawn on top of or behind the chart
        // valid values: "front", "back", "between"
        position: "back",

Build Locally

npm install
npm run build


You can find documentation for the main plugin, Chart.js, at
There are some samples for this plugin in the samples folder.


chartjs-plugin-watermark.js is available under the MIT license.