I need Highchart watermark image when i download highchart - highcharts

Question

I am using HighCharts Javascript library for a web application. I need Highchart watermark image when i download Highchart.
I am using normal hicgchart code.
Code here
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
Any suggestions?

Answer 1

please use this code
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
events: {
load: function() {
this.renderer.image('https://i.stack.imgur.com/E1r9X.png', 200, 20, 163, 187)
.attr({
zIndex:1000 })
.add();
}
}
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}],
exporting: {
enableImages: true
}
});
image{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script><div id="container" style="height: 300px"></div>

Answer 2

You can watermark a picture only when it is downloaded by including that in the exporting options, like this:
exporting: {
chartOptions: {
chart: {
plotBackgroundImage: 'https://i.stack.imgur.com/E1r9X.png'
}
}
}
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}],
exporting: {
chartOptions: {
chart: {
plotBackgroundImage: 'https://i.stack.imgur.com/E1r9X.png'
}
}
}
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
Working JSFiddle example: https://jsfiddle.net/ewolden/acL4z2su/2/

Answer 3

A watermark on screen where you can interact with the chart (based on a previous answer) can come from:
//
// add a watermark (where template is the highchart object I'm building)
//
template.chart.events = {
load: function() {
this.renderer.image('https://i.stack.imgur.com/E1r9X.png')
.attr({
zIndex:1000, x:'10%', y:'10%', width:'80%',height:'80%', style:'pointer-events:none' })
.add();
}
};