https://github.com/albinodrought/chartjs-plugin-watermark

Watermark plugin for Chart.js
https://github.com/albinodrought/chartjs-plugin-watermark

chartjs

Last synced: 12 days ago
JSON representation

Watermark plugin for Chart.js

• Host: GitHub
• URL: https://github.com/albinodrought/chartjs-plugin-watermark
• Owner: AlbinoDrought
• License: mit
• Created: 2016-12-20T00:04:52.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2024-04-25T13:08:19.000Z (about 1 year ago)
• Last Synced: 2025-04-25T10:44:55.591Z (24 days ago)
• Topics: chartjs
• Language: JavaScript
• Homepage: https://albinodrought.github.io/chartjs-plugin-watermark/samples/
• Size: 390 KB
• Stars: 10
• Watchers: 3
• Forks: 7
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# chartjs-plugin-watermark

[![npm version](https://badge.fury.io/js/chartjs-plugin-watermark.svg)](https://badge.fury.io/js/chartjs-plugin-watermark)

![Build Status: Node.js CI](https://github.com/AlbinoDrought/chartjs-plugin-watermark/workflows/Node.js%20CI/badge.svg)

[![NPM](https://nodei.co/npm/chartjs-plugin-watermark.png)](https://nodei.co/npm/chartjs-plugin-watermark/)

A simple watermark plugin for Chart.js 3 and 4.

For Chart.js 2, use [version ^1](https://www.npmjs.com/package/chartjs-plugin-watermark/v/1.0.3)

[View samples on Github Pages](https://albinodrought.github.io/chartjs-plugin-watermark/samples/)

## Installation

### Using NPM

```

npm i chartjs-plugin-watermark

```

```js

import { Chart } from 'chart.js'

import ChartjsPluginWatermark from 'chartjs-plugin-watermark'

Chart.register(ChartjsPluginWatermark)

```

### Using CDN

Plugin will automatically register if their is a global Chart.js instance available.

```html

```

## Configuration

To configure the watermark plugin, add these options to your chart config:

```javascript

{

    // container for watermark options

    watermark: {

        // the image you would like to show

        // alternatively, this can be of type "Image"

        image: "https://placekitten.com/200/300",

        

        // 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

```

## Documentation

You can find documentation for the main plugin, Chart.js, at [www.chartjs.org/docs](http://www.chartjs.org/docs).

There are some samples for this plugin in the [samples folder](samples).

## License

chartjs-plugin-watermark.js is available under the [MIT license](http://opensource.org/licenses/MIT).