New to Kendo UI for Angular? Start a free 30-day trial

Exporting Chart Data to CSV

Environment

Product

Progress® Kendo UI® for Angular Chart

Description

I want to export the data of the Kendo UI for Angular Chart to a CSV (Comma-separated values) file. How can I achieve this?

How do I save Chart data as a CSV file in an Angular application?
Is it possible to use third-party libraries to convert Chart data to CSV format?

Solution

To export data from the Kendo UI for Angular Chart to a CSV file, follow these steps:

Install the json-2-csv library to convert the Chart data, which is structured as an array of JSON objects, into CSV format.
bash
```
npm install json-2-csv
```
Install the File Saver package to save the CSV file.
bash
```
npm install --save @progress/kendo-file-saver
```

Define the Chart data structure and create a method to export the data to CSV using the installed packages.

typescript

export class AppComponent {
  public categories: string[] = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];
  public chartSeries = [
  { name: 'Series 1', data: [123, 276, 310, 212, 240, 156, 98] },
  { name: 'Series 2', data: [165, 210, 287, 144, 190, 167, 212] },
  { name: 'Series 3', data: [56, 140, 195, 46, 123, 78, 95] },
  ];

  public exportChartToCSV(): void {
  const chartData = this.categories.map((month, index) => {
    const row: any = { Month: month };
    this.chartSeries.forEach((series) => {
    row[series.name] = series.data[index];
    });
    return row;
  });

  const csv = json2csv(chartData);
  const dataURI = 'data:text/plain;base64,' + encodeBase64(csv);
  saveAs(dataURI, 'chartData.csv');
  }
}

The purpose of this article is to provide basic guidance on how to export the Grid data to CSV. Kendo UI for Angular is not affiliated with the json-2-csv library. You can use any third-party library which supports such type of conversion.

The following example demonstrates the full implementation of the suggested approach.

Change Theme

Theme

Loading ...

Exporting Chart Data to CSV

Environment

Description

Solution

See Also