How to add text when exporting a chart in highcharts? - charts

Question

I have a line chart and I can export chart to pdf or image.
I wonder if I can put some additional text below the chart, only when I export it? Such as additional information about the chart data.
I'd like to export the chart that looks like this:enter image description here
I use Ionic v3.
If possible, I would like to see a sample code.
Thank you.

Answer 1

Refer to this live demo: http://jsfiddle.net/kkulig/fje0agem/
I created some space for the text area by manipulating chart.height and chart.marginBottom in exporting.chartOptions. I adjusted the position of some elements (credits, legend) by changing their y offset.
Text and lines can be rendered via SVGRenderer. load event is a proper place to put the code responsible for that.
chart: {
height: 300,
width: 600
},
exporting: {
chartOptions: {
chart: {
height: 600,
marginBottom: 300,
events: {
load: function() {
var renderer = this.renderer;
renderer.path(['M', 30, 385, 'L', 570, 385, 'Z']).attr({
stroke: 'black',
'stroke-width': 1
}).add();
renderer.text('Some text...', 30, 400).add();
}
}
},
legend: {
y: -220
},
credits: {
position: {
y: -220
}
}
}
}
API references:
https://api.highcharts.com/highcharts/exporting.chartOptions
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer

Answer 2

With Highcharts 7.2.0 you can add a caption (API) besides the chart which is included in the export.
For example (JSFiddle demo):
Highcharts.chart('container', {
series: [{
data: [1, 4, 3, 5],
}],
caption: {
text: '<b>Example</b><br><em>Lorem ipsum dolor sit amet.</em>'
}
});