Search code examples
csvhighchartsexport-to-csvreact-highcharts

Exclude a specific series from exporting to csv


I'm using HighCharts library to plot some data in gauge chart. My chart looks like the image below.

enter image description here

To achieve this plot, I'm using solid gauge and gauge together using series option, (solid gauge for the semicircular and gauge for the dial.)

...
series: [
  {
    name: 'solidgauge',
    type: 'solidgauge',
    data: [data.value],
    ...
  },
  {
    name: 'gauge',
    type: 'gauge',
    data: [data.value],
    ...
  },
]
...

Obviously the data for both series is identical, so when I export the chart into csv file, the library create two columns with same data and I want to change this behavior and export only one of series, but after a lots of search, I couldn't find any option in highcharts to exclude a specific series.

enter image description here

How can I do that? (I'm not familiar with exporting customization, answer with little code sample would be great for start creating my own.)


Solution

  • You can wrap the getCSV method and hide the series before the proceed:

    var H = Highcharts;
    
    H.wrap(H.Chart.prototype, 'getCSV', function(proceed) {
      var result;
    
      this.series[1].hide();
      result = proceed.apply(this, Array.prototype.slice.call(arguments, 1));
      this.series[1].show();
    
      return result;
    });
    

    Live demo: https://jsfiddle.net/BlackLabel/109a7vek/

    Also, you can edit the generated data in the exportData event:

    H.addEvent(H.Chart, 'exportData', function(e){
      e.dataRows.forEach(function(el){
        el.splice(2, 1);
      });
    });
    

    Live demo: https://jsfiddle.net/BlackLabel/du7nz2hy/

    Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts