Reputation: 521
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
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
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
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
Reputation: 9953
I think it can be done with the credits
option by setting background: url(...)
of itemStyle
Upvotes: 0