I am following the code example of this jsFiddle in order to draw an additional table into the Highcharts SVG, so that it can be exported into an image when the chart is exported.
I am able to draw the table I want, but when I export, my extra table is not part of the image, it just shows the chart as if I had not done any of the extra drawing.
This is important to note, I think, because as in the example jsFiddle, I leave the legend in its default state (horizontal, centered), with a negative y value in order to trick Highcharts into extending the SVG area below the chart to leave room for the table. But then, as part of the process where I draw my table, I move the individual legend elements by changing their tranform: translate() values.
However, when I try to export the chart to an image, in the image the legend is back to being horizontal and centered below the chart, which indicates to me that Highcharts in not actually reading the "live" SVG information, but instead rendering some sort of cached version, or something?
I am using offline exporting, is this behavior a result of that?
I am also using highcharts-react-official, and I have my imports and setup like this:
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import Exporting from 'highcharts/modules/exporting';
import OfflineExporting from 'highcharts/modules/offline-exporting';
Exporting(Highcharts);
OfflineExporting(Highcharts);
export default class MyChart extends Component {
// etc
}
Is this behavior something to do with using highcharts-react-official?
As suggested in the comments, I tried using marginBottom instead of a negative Y value for the legend in order to make space for the table at the bottom of the SVG, but that did not change anything, the table was still not exported.
Here's how my component is set up. I tried to include all the different stages it goes through as it receives and processes the data before actually putting it into the chart:
