Exporting Chart to CSV and viewing as table *ReactJs*

[adR]

Hi guys, I am using Highcharts in ReactJs and using the exporting, offline-exporting and export-data modules.

For the chart options I'm passing callback functions for formatting xAxis (passing categories), yAxis and tooltip to their respective formatter option.

The rendered chart has its xAxis, yAxis and tooltip formatted correctly as per the callback functions.

But the formatted values I see on the chart aren't the same in in the exported CSV or table rendered by clicking "View Table".

Is there an option which will use the formatted data from the options mentioned above in the exported CSV/view table? Or do I have to format the data directly in series and categories passed to the chart.

I searched through other related threads on the forum and read some solutions about creating a "fake chart" with the formatted data and passing that to the export, but I don't believe this is suitable for ReactJs.

Thanks in advance!

[jakub.s]

Hi,

Welcome to our forum & thanks for the question!

1. If you want to modify the chart exported to one of the visual formats (png, jpeg, pdf, SVG) then you can use exporting.chartOptions and adding additional options which will only be applied to your exported chart. (API: https://api.highcharts.com/highcharts/e ... artOptions)

2. If you want to modify the exported data (via CSV, Excel, View Table export) then you could apply your custom functions to the data in chart.events.exportData() where you can modify the data before they get exported.

Demo: https://jsfiddle.net/BlackLabel/rxgcqjmu/

Let me know if that helps!

Best regards,
Jakub

[adR]

Hi,

Welcome to our forum & thanks for the question!

1. If you want to modify the chart exported to one of the visual formats (png, jpeg, pdf, SVG) then you can use exporting.chartOptions and adding additional options which will only be applied to your exported chart. (API: https://api.highcharts.com/highcharts/e ... artOptions)

2. If you want to modify the exported data (via CSV, Excel, View Table export) then you could apply your custom functions to the data in chart.events.exportData() where you can modify the data before they get exported.

Demo: https://jsfiddle.net/BlackLabel/rxgcqjmu/

Let me know if that helps!

Best regards,
Jakub

Thank you for your response, this is exactly what I needed.

For anyone else reading this with a similar issue, here is an example of how I used chart.events.exportData in ReactJs / Typescript.

Code: Select all

const options: Highcharts.Options = {
...
chart: {
            type: chartType,
            events: {
              exportData: function (this: Chart, event: ExportDataEventObject) {
                return exportDataHandler({ dataRows: event.dataRows, units });
              },
            },
          },
...  
}

function exportDataHandler({ dataRows, units }: { dataRows: Array<Array<string>>; units: string }) {
  dataRows.forEach((row) => {
    row.forEach((value, idx) => {
      switch (true) {
        // Check if string, dayjs interprets numbers like 21862.78 as a Unix timestamp in seconds
        // and the validation will resolve to true.
        case typeof value === "string" && dayjs(value).isValid():
          row[idx] = dayjs(value).format("DD/MM/YYYY hh:mm a");
          break;
        case typeof value === "number":
          row[idx] = formatUnits(value, units, 2);
          break;
        default:
          break;
      }
    });
  });
}

[jakub.s]

I'm glad it helped!

Thanks for sharing your code:)

Do not hesitate to let me know if you have any more questions.

Best regards,
Jakub