How to get an image watermark in HighCharts charts?

Question

I am using HighCharts Javascript library for a web application and would like to have an image watermark inside the charts (let's say a small image on the left top corner). Not only to show this watermark image in the browser, but also when someone would export the chart to JPG or PNG.

I have seen this somewhere once in a web application that also uses HighCharts but can't remember where that was.

Any suggestions?

score 7 · Accepted Answer · answered Feb 09 '12 at 09:17

7

Look at this: http://jsfiddle.net/highcharts/cDcw7/ Tip: I figured out, that it is important for the export function to work correctly, that the URL starts with http://...

answered Feb 09 '12 at 09:17

scu

141
4

3

The jsfiddle is broken. Here a fixed version: http://jsfiddle.net/ecampohermoso/yappb2q3/4/ – Ernesto Campohermoso Aug 21 '15 at 08:18
1

I don't see a watermark on the updated version either, is it still working? – chrismarx Sep 12 '18 at 20:23

score 1 · Answer 2 · edited May 23 '17 at 12:25

1

I have been unable to get the itemStyle property of credits to work.

Instead, taking inspiration from Place text in center of pie chart - Highcharts, I have come up with this little fiddle: http://jsfiddle.net/2P98N/22/

edited May 23 '17 at 12:25

Community

1
1

answered Apr 14 '13 at 18:41

khan

444
3
8

1

Please avoid posting link only answers, if your link becomes invalid then the whole answer is lost. Please consider fleshing out this answer to include the main points of the solution provided in the links. – JaredMcAteer Apr 14 '13 at 19:00

George 2.0 Hope · Answer 3 · 2022-07-22T00:29:22.820

Here's the code snippet to add the watermark:

Highcharts.chart('container', {

    chart: {
        renderTo: 'container',
        events: {
            load: function() {
                this.renderer.image('https://wp-assets.highcharts.com/svg/highcharts-logo.svg', 80, 40, 484, 125)
                    .add();
            }
        }
    },
    credits: {
        text: 'highcharts.com',
        href: 'http://highcharts.com'
    },

    //... ... ...

Note: Should highcharts change the url to their svg:

https://wp-assets.highcharts.com/svg/highcharts-logo.svg

... the above won't work.

I tested it on export as well... this technique allows the export to include the watermark image of all types except csv & xls.

score 0 · Answer 4 · answered Jan 05 '12 at 14:09

0

I think it can be done with the credits option by setting background: url(...) of itemStyle

answered Jan 05 '12 at 14:09

T I

9,785
4
29
51

Where can I find that? In what file? highcharts.js is pretty hard to read. – Glooh Jan 05 '12 at 16:29
Hi sorry should have said that I haven't used highcharts just read the [api](http://www.highcharts.com/ref/#credits) so looks like you can just specify that option when instantiating a chart. – T I Jan 05 '12 at 16:38

How to get an image watermark in HighCharts charts?

4 Answers4