Combine server side exporting and client side exporting in Highcharts (Vue)

Question

I was using Highcharts' export server to download charts as an image. I need to use the client-side(offline) exporting feature in a single chart due to the count of data points in the chart. After I use client-side exporting in just one chart, all of the charts turn into client-side exporting. How can I use both client-side exporting and Highcharts' export server in the same project?

Here is the relevant parts from the source code:

client-side-exporting-chart.vue

<template>
  <div>
    <chart :options="chartOptions" ref="chart" />
  </div>
</template>
<script>
import Highcharts from "highcharts";
import { Chart } from "highcharts-vue";
import offlineExporting from "highcharts/modules/offline-exporting";

offlineExporting(Highcharts);

export default {
  // ...
  components:{
    Chart
  },
  data(){
    return {
       chartOptions: {
         // ...
         exporting:{
           // ...
           fallbackToExportServer:false
         }
       }
     }
   }
 }
</script>

export-server-chart.vue

<template>
  <div>
    <chart :options="chartOptions" ref="chart" />
  </div>
</template>
<script>
import Highcharts from "highcharts";
import { Chart } from "highcharts-vue";
import exportingInit from "highcharts/modules/exporting";

exportingInit(Highcharts);

export default {
  // ...
  components:{
    Chart
  },
  data(){
    return {
       chartOptions: {
         // ...
         exporting:{
           // ...
           fallbackToExportServer:true
         }
       }
     }
   }
 }
</script>

Answer 1

Modules are initialized globally and since you have only one Highcharts instance in your project, offline-exporting is auto-enabled for each component.

Under the hood, the module redefines menuItemDefinitions and uses exportChartLocal instead of exportChart method. You can simply reverse back this behaviour for individual charts, by adding the below configuration:

  exporting: {
    menuItemDefinitions: {
      downloadPNG: {
        textKey: 'downloadPNG',
        onclick: function() {
          this.exportChart();
        }
      },
      downloadJPEG: {
        textKey: 'downloadJPEG',
        onclick: function() {
          this.exportChart({
            type: 'image/jpeg'
          });
        }
      },
      downloadPDF: {
        textKey: 'downloadPDF',
        onclick: function() {
          this.exportChart({
            type: 'application/pdf'
          });
        }
      },
      downloadSVG: {
        textKey: 'downloadSVG',
        onclick: function() {
          this.exportChart({
            type: 'image/svg+xml'
          });
        }
      }
    }
  }

---

Live demo: http://jsfiddle.net/BlackLabel/bgk5ftaj/

API Reference: https://api.highcharts.com/highcharts/exporting.menuItemDefinitions