CODEWITHSUNDEEP
javascriptimagehighchartswatermark
Glooh
Glooh

Reputation: 521

How to get an image watermark in HighCharts charts?

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?

Upvotes: 8

Views: 9782

Answers (4)

George 2.0 Hope
George 2.0 Hope

Reputation: 648

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.

Upvotes: 0

khan
khan

Reputation: 444

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/

Upvotes: 1

scu
scu

Reputation: 141

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

Upvotes: 7

T I
T I

Reputation: 9953

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

Upvotes: 0

Related Questions