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?

Trisect

Answer 1

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

Chantel

The jsfiddle is broken. Here a fixed version: jsfiddle.net/ecampohermoso/yappb2q3/4 – Cinereous

I don't see a watermark on the updated version either, is it still working? – Helga

Answer 2

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/

Rakehell

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. – Gilbye

Answer 3

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

Zephan

Where can I find that? In what file? highcharts.js is pretty hard to read. – Trisect

Hi sorry should have said that I haven't used highcharts just read the api so looks like you can just specify that option when instantiating a chart. – Zephan

Answer 4

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.

Heidyheifer