Export of high chart to CSV using custom button

Question

I have an Angular project and I am trying to export the chart to different export. When I tried, I was able to export the chart as png, jpeg, pdf, SVG etc. But I am not able to export the chart as CSV or . I have tried below code:

this.lineChart.chart.downloadCSV(); //For CSV

@ViewChild("lineChart", { static: false }) lineChart: any;
Highcharts = Highcharts;
chartOptions = {
series: [
  {
    name: "Current - 2014",
    data: [
      {
        name: "1",
        y: 200030
      },
      {
        name: "2",
        y: 23300
      },
      {
        name: "3",
        y: 2300
      },
      {
        name: "4",
        y: 23002
      },
      {
        name: "5",
        y: 340300
      },
      {
        name: "6",
        y: 263030
      },
      {
        name: "7",
        y: 530300
      },
      {
        name: "8",
        y: 880300
      },
      {
        name: "9",
        y: 232300
      },
      {
        name: "10",
        y: 34300
      },
      {
        name: "11",
        y: 200030
      },
      {
        name: "12",
        y: 980300
      }
    ],
    color: "indigo"
  },
  {
    name: "Prior - 2013",
    data: [
      {
        name: "1",
        y: 90030
      },
      {
        name: "2",
        y: 23300
      },
      {
        name: "3",
        y: 672300
      },
      {
        name: "4",
        y: 230300
      },
      {
        name: "5",
        y: 230300
      },
      {
        name: "6",
        y: 200030
      },
      {
        name: "7",
        y: 230300
      },
      {
        name: "8",
        y: 230300
      },
      {
        name: "9",
        y: 230300
      },
      {
        name: "10",
        y: 230300
      },
      {
        name: "11",
        y: 200030
      },
      {
        name: "12",
        y: 230300
      }
    ],
    color: "green"
  }
  ],
chart: {
  type: "line",
  renderTo: "chart",
  events: {
    load: function(event) {
    }
  }
},
title: {
  text: "Net activity along fiscal period accross years"
},
xAxis: {
  title: {
    text: "Fiscal Period"
  },
  type: "category"
},
yAxis: {
  title: {
    text: "Functional Amount"
  },
  gridLineWidth: 1
},
legend: {
  enabled: true,
  align: "right",
  verticalAlign: "middle",
  layout: "vertical"
},
credits: {
  enabled: false
},
plotOptions: {
  series: {
    allowPointSelect: true,
    minPointLength: 3,
    point: {
      events: {
        select: e => {
          console.log("x-axis value: ", e.target.name);
          console.log("y-axis value: ", e.target.y);
          let selectedPoint = this.lineChart.chart.getSelectedPoints();
          selectedPoint.forEach((point, index) => {
            console.log(
              "Point " + index + " : ",
              point.name + " - " + point.y
            );
          });
        },
        load: e => {
          this.lineChart.chart.reflow();
        },
        click: function(e) {
        }
      }
    }
  }
},
tooltip: {
  formatter: function() {
    return (
      this.series.name + "<br/>" + this.x + " : " + "<b>" + this.y + "<b>"
    );
  }
},
exporting: {
  enabled: true,
  showTable: false,
  fileName: "line-chart"
}};

Error I am getting in console:

AppComponent.html:16 ERROR TypeError: Cannot read property 'decimalPoint' of undefined
    at d.Chart.b.Chart.getCSV (export-data.src.js:760)
    at d.Chart.b.Chart.downloadCSV (export-data.src.js:978)
    at AppComponent.export (app.component.ts:230)
    at Object.eval [as handleEvent] (AppComponent.html:16)
    at handleEvent (core.umd.js:sourcemap:29354)
    at callWithDebugContext (core.umd.js:sourcemap:30424)
    at Object.debugHandleEvent [as handleEvent] (core.umd.js:sourcemap:30151)
    at dispatchEvent (core.umd.js:sourcemap:20002)
    at eval (core.umd.js:sourcemap:28563)
    at HTMLButtonElement.eval (dom_renderer.ts:52)

Can any help me on this. The demo project I tried is available on the link below:

https://stackblitz.com/edit/angular-chart-export?file=src%2Fapp%2Fapp.component.ts

https://angular-chart-export.stackblitz.io

Thanking everyone in advance.

Answer 1

I think you are missing the import in your TS file. Try adding the below import in your component and try:

import HC_exporting from "highcharts/modules/exporting";
import HC_Data from "highcharts/modules/export-data";
HC_exporting(Highcharts);
HC_Data(Highcharts);

Answer 2

First Import the script files:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"> 
</script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

In chatOptions we can write customize options in the high-charts menu we can customize the dropdown options. In chart options, we can write like:

exporting: {
buttons: {
  contextButton: {
    menuItems: ['downloadCSV', 'downloadSVG'],
  },
},

}

Example: click here Reference: click here, Example2