Creating a custom button for exporting a high chart to CSV

My Angular project involves exporting a chart to various formats, such as png, jpeg, pdf, and SVG. However, I am encountering an issue when trying to export the chart as CSV or . I have attempted the following 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
      },
      ...
},
exporting: {
  enabled: true,
  showTable: false,
  fileName: "line-chart"
}};

An error is appearing in the 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)
    ...

If anyone can assist with this issue, you can find the demo project at the following link:

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

I appreciate any help in advance.

angulartypescripthighcharts

Answer №1

It appears that your TS file is lacking an essential import. Consider including the following import statement in your component and see if it resolves the issue:

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

Answer №2

To begin, include the necessary 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 the chatOptions section, you can define custom options for the high-charts menu to personalize the dropdown choices. For instance, in chart options, you may specify:

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

}

Check out this example for reference. You can also refer to these links for more information: here, and here as well.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble accessing functions in Typescript when importing JavaScript files, although able to access them in HTML

Recently, I started incorporating TypeScript and React into my company's existing JavaScript code base. It has been a bit of a rollercoaster ride, as I'm sure many can relate to. After conquering major obstacles such as setting up webpack correc ...

javascripttypescript

Using LINQ to group and organize data to generate a series for a chart

Consider a simplified Items entity, which includes the following properties: Id (int, PK), itemDate (datetime, not null), and itemCategory (string, not null). Can you provide a LINQ to Entities query that calculates the total number of items in each categ ...

c#jsonlinqhighchartslinq-to-entities

Display array elements in a PDF document using pdfmake

Upon reaching the final page of my Angular project, I have an array filled with data retrieved from a database. How can I utilize pdfmake to import this data into a PDF file? My goal is to display a table where the first column shows interv.code and the ...

javascripthtmlangulartypescriptpdfmake

How can we optimize component loading in react-virtualized using asynchronous methods?

In my component, I have implemented a react-virtualized masonry grid like this: const MasonrySubmissionRender = (media: InputProps) => { function cellRenderer({ index, key, parent, style }: MasonryCellProps) { //const size = (media.submiss ...

reactjstypescriptreact-virtualized

The element is inherently an 'any' type as the expression of type 'number' does not have the capability to index type 'Object'

Hey there, I'm currently in the process of learning Angular and following along with the Note Mates tutorial on YouTube. However, I've hit a stumbling block as I attempt to implement sorting by relevancy. The issue lies with the code snippet belo ...

angulartypescripterror-handling

How to smoothly transition a div from one location to another using animations in an Ionic3-Angular4 application

I'm attempting to incorporate some animation into my Ionic 3 mobile app. Specifically, I want to shift a div from one location to another. In the code snippet provided below, I am looking to move the div with the "upper" class after the timeline-item ...

javascriptangularcssionic2angular-animations

Checking the formik field with an array of objects through Yup for validation

Here is a snippet of the code I'm working on: https://codesandbox.io/s/busy-bose-4qhoh?file=/src/App.tsx I am currently in the process of creating a form that will accept an array of objects called Criterion, which are of a specific type: export inte ...

javascriptreactjstypescriptformikyup

Testing the open dialog with a unit test case

I encountered an issue while writing a unit test case for the open dialog feature in Angular 7. A TypeError is being thrown: "Cannot read property 'debugElement' of undefined." I am seeking assistance from anyone who can help me troubleshoot this ...

angularunit-testing

Issue with displaying data in *ngFor after service call in Angular 9 - Data is retrieved and stored in the list,

My code example is working with the API end point and I received a response. However, I am facing an issue with displaying the data using *ngFor in my Angular component. In the ngOnInit method of category-list.component.ts, I'm calling a service to fe ...

angular

Troubleshooting: Angular 2 ngIf not functioning properly when using properties in extended classes

I have developed an angular 2 component for a modal that inherits from a base modal class. The base class contains a boolean property to determine if the modal is open or closed, which I am utilizing in the template with *ngIf to toggle the visibility of t ...

angular

Create an object using a combination of different promises

Creating an object from multiple promise results can be done in a few different ways. One common method is using Promise.all like so: const allPromises = await Promise.all(asyncResult1, asyncResult2); allPromises.then([result1, result2] => { return { ...

javascripttypescript

What's the best way to fix a div to the bottom left corner of the screen?

I have explored various solutions regarding this issue, but none of them seem to meet my specific requirements. What I am trying to achieve is the correct positioning of a div as depicted in the green area in the image. https://i.sstatic.net/O9OMi.png Th ...

htmlcssangularbootstrap-4bootstrap-5

Mismatched non-intersecting categories with TypeScript

I have an object that I need to conditionally render some JSX based on certain properties. I want to restrict access to specific parts of the object until certain conditions are met. Here is my scenario: const { alpha, bravo } = myObject; if (alpha.loadin ...

typescript

What is the best way to create unit tests for a React component using TypeScript?

I recently completed a small React project using TypeScript and decided to have it print numbers of li tags in the browser. During this process, I wanted to write unit tests that would test if the component created the HTML element . However, as someone ...

reactjstypescriptjestjsreact-testing-library

Navigating API data conversion on the frontend using Object-Oriented Programming

Currently, I am facing a challenge while developing the frontend of a web application using TypeScript. The dilemma revolves around efficiently converting a data object from an API response into a format suitable for the application. Let's consider r ...

typescriptoopfrontend

Tips for configuring Apache to serve compressed gzip files efficiently

Front end technology: Angular Back end technology: PHP Server setup: Apache Utilize webpack plugin to compress files (create bundle.js.gz) When attempting to run, I encounter errors. Error message: Uncaught SyntaxError: Invalid or unexpected token bu ...

phpangularapache

Establishing the testing sequence for Angular 8

I've been encountering a frustrating issue where one of my tests fails at random intervals. To add some order to the debugging process, I attempted to set a seed number in the 'karma.conf.js' file and also tried setting 'random: false&a ...

angularkarma-jasmineangular8angular-test

Tips for maintaining selected text while a modal window is active

So I'm currently working on a document writer and I'm utilizing document.execCommand to insert links. What I aim for is the ability for a user to select/highlight text, click a button to add a link to that specific text (via a modal), and then ha ...

javascripthtmlangulartypescript

I'm puzzled as to why I am unable to invoke a class method within this callback function. The error message indicates a TypeError: 'this' is undefined

Currently, I am troubleshooting a challenge in my Angular application that involve TypeScript. The issue lies within a method in a TypeScript class: findArtistBidsAppliedByCurrentWall(bid):Observable<Bid[]> { console.log("findArtistBidsApplied ...

javascripttypescript

Angular 10 introduces a new approach to handling concurrency called "forkJoin"

Here is the code I have: async getBranchDetails() ----component method { let banks = this.bankDataService.getBanks(); let branchTypes = this.branchDataService.getBranchTypes(); forkJoin([banks,branchTypes]).subscribe(results => { ...

angulartypescriptpromiserxjs