3

We are currently on HighCharts 4.2.2

http://api.highcharts.com/highcharts/exporting

So while reading their exporting docs, I decided instead of using their default menu dropdown. I just needed access to the .exportChart() function.

So what I do is once the chart is done rendering data, I store the chart object into a Factory.

When I click on a button in another component (chartHeaderComponent) to actually download the screenshot I simple retrieve the stored chart object and call exportChart on it.

HighChartsComponent

return priceLine
    .then(alertSeries)
    .then(tagLine)
    .then(renderChart(chart))
    .then((chart) => {
        ChartExport.setScreenshot(chart);
        this.chartLoading = false;
        return chart;
    });

ChartHeaderComponent

this.screenshotChart = () => ChartExport.getScreenshot().exportChart();

This will download the chart for me, however the Navigator data is missing :(

First screenshot is what I see in our app:

enter image description here

2nd screenshot is what I see after downloading the screenshot.

enter image description here

I could post details about the chart object here, but it's huge so if anyone can tell me a specific key they need to see I can post it here.

Any help or tips are highly appreciated! :D

Or at least thoughts on how to hide the Navigator from the Screenshot feature.

Community
  • 1
  • 1
Leon Gaban
  • 36,509
  • 115
  • 332
  • 529
  • 1
    I cannot say what is happening based on the pictures. My guess is that you manipulate series incorrectly because you loose the series/data from the navigator. To disable navigator on export, you need to set exporting.chartOptions.navigator.enabled to false (scrollbar optionally) http://jsfiddle.net/yc1yptos/ – morganfree Jan 25 '17 at 11:56
  • @morganfree thanks! I'm hiding the Navigator now. It's not really needed here as the dates are seen in the xAxis. Do you want to post your official answer? – Leon Gaban Jan 25 '17 at 23:56
  • Sure, I posted the answer. – morganfree Jan 26 '17 at 17:11

1 Answers1

4

To hide a navigator on exporting, you need to set exporting.chartOptions.navigator.enabled to false.

exporting: {
        chartOptions: {
          navigator: {
            enabled: false
          },
          scrollbar: {
            enabled: false
          }
        }
    }

example: http://jsfiddle.net/yc1yptos/

morganfree
  • 12,254
  • 1
  • 14
  • 21