In order to limit the disabled series/legends in the HighChart pie chart, it is necessary to implement restrictions when exporting

I am currently utilizing the Highcharts library to create visually appealing charts. When exporting data into a CSV file from a Pie chart, I would like to prevent legends/series data from being included.

Here is what I have attempted:

...
plotOptions: {
  pie: {
   point: {
                    events: {
                        legendItemClick: function(e) {
                            const chart = this,
                                series = chart.series;
                            debugger;
                            console.log(series[1])
                            series[1].update({
                                type: 'pie',
                                showInLegend : false
                            })
                        }
                    }
                }
  }
}
...

However, I encountered an issue where series[1] was undefined in this scenario. Additionally, in other chart types such as Column, Bar, and Line, automatically disabled series/legends do not appear in the CSV file.

Thank you in advance for any assistance provided.

Answer №1

Your current code setup may not be correct. Consider this alternative:

  point: {
    events: {
      legendItemClick: function(e) {
        const point = this,
          series = point.series;
        series.update({
          type: 'pie',
          showInLegend: false
        })
      }
    }
  }

Check out the live demo here: https://jsfiddle.net/BlackLabel/4unz90kv/

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

The Typescript Compiler API Type Checker produces varying types from what is perceived by the Typescript Language support within the VS Code environment

Utilizing the Typescript Compiler API type checker, I am analyzing identifier nodes in a loaded file to determine their types within a program. To begin, I load the file and initialize the program and type checker like so: const program = ts.createProgram ...

Guide to resolving typescript issue 'name' is not found in type 'ByRoleOptions' while accessing by name using getByRole in react-testing-library

I have a custom component that showcases a collection of filters in the form of removable chips. To test this functionality, I am utilizing react-testing-library with a focus on querying by accessible name as outlined here, using the getByRole method. The ...

Struggling with the error message "Type 'ChangeEvent<unknown>' is not assignable to type 'ChangeEvent<MouseEvent>'" while working with React and TypeScript? Here's how you can tackle this issue

Within the App.tsx file, I encountered an issue with the Material UI Pagination component where it was throwing an error related to type mismatch. The error message stated: Argument of type 'ChangeEvent' is not assignable to parameter of type &ap ...

Clicking on the React Bootstrap Checkbox within the Nav component does not trigger a rerender of the NavItem component

Encountering an unusual issue while using a Nav and NavItem with a Checkbox from React Bootstrap. What I've noticed is that when clicking directly on the checkbox instead of the NavItem button, the checkbox does not re-render correctly even though my ...

Integrating Highcharts Annotations with a donut chart

I'm struggling to find a way to position annotations for a donut chart outside of the donut itself. I've experimented with the distance, x, and y properties, but none have given me the desired outcome. Is there a method to properly position the a ...

Crafting interactive buttons with angular material

I've been working on an angular application where I created 5 mat flat buttons using angular material. <button mat-flat-button [ngClass]="this.selected == 1 ? 'tab_selected' : 'tab_unselected'" (click)="change(1)">B-L1</b ...

Show a single div in a modal popup dialog box using Angular with a template URL HTML file

I am experiencing a problem with displaying specific div elements in my template. I have two divs, A and B, but when I try to call only one of them from the TypeScript file using dialog.open, both divs end up being displayed in the popup dialog box. My re ...

How to effectively handle multiple conditional statements in TypeScript?

I attempted to implement a "multiple filter" feature in TS, so... If I don't provide any input -> all products are returned as usual; However, if I specify some parameters -> only products matching the parameters are returned. (I us ...

Using a decorator with an abstract method

Discussing a specific class: export abstract class CanDeactivateComponent { abstract canLeavePage(): boolean; abstract onPageLeave(): void; @someDecorator abstract canDeactivateBeforeUnload(): boolean; } An error occurred stating that A decorat ...

Incorporate PrimeNG components into your Angular2 project!

These are the steps I followed to successfully install PrimeNG: npm install primeng --save npm install primeui --save To update Index.html: (I had to copy directories primeng and primeui from node_modules to the assets folder in order to resolve th ...

Overriding TypeScript types generated from the GraphQL schema

Currently, I am utilizing the graphql-code-generator to automatically generate TypeScript types from my GraphQL schema. Within GraphQL, it is possible to define custom scalar types that result in specific type mappings, as seen below in the following code ...

Pattern matching to exclude specific characters

To enhance security measures, I am looking to restrict users from inputting the following characters: ~ " # % & * : < > ? / \ { | } . The key requirement is that all other characters should be permitted, while ensuring that only the sp ...

Leverage classes within components for effective dependency injection

Currently, I am working with Angular and have set up 1 component, 1 class, and 1 service in my project. The service is defined as an @Injectable class and properly configured in app.module.ts. @Injectable() export class MyService { My class receives the ...

What is the solution for resolving array items in a GraphQL query?

I am facing an issue with my graphql Query, specifically in trying to retrieve all the fields of a Post. { getSpaceByName(spaceName: "Anime") { spaceId spaceName spaceAvatarUrl spaceDescription followin ...

Navigating to the detail page following a POST request in RTK query: A step-by-step guide

In my React RTK-query form, I am facing an issue where after a POST request is made, the form should navigate to the next step. However, in order to do that, I need to obtain the id of the newly created record. The backend auto-increments the id and does n ...

An object in typescript has the potential to be undefined

Just starting out with Typescript and hitting a snag. Can't seem to resolve this error and struggling to find the right solution useAudio.tsx import { useEffect, useRef } from 'react'; type Options = { volume: number; playbackRate: num ...

The index type 'X' is not allowed for use in this scenario

I encountered an issue in my TypeScript code: error message: 'Type 'TransitionStyles' cannot be used as an index type.' I'm wondering if there's a way to modify my interface so that it can be used as an index type as well: ...

Using Angular2 and ng-bootstrap to create a modal template that can be easily reused with various sets

I am in the process of developing an interactive dashboard interface that showcases various entities with comparable data. Each entity is equipped with an edit button, which I want to utilize to trigger a modal displaying the relevant data. My goal is to ...

What is the best way to adjust the THREE.js view to match the size of the canvas

I am trying to implement dragging and dropping an element to the mouse position by synchronizing THREE.js space with the canvas size, where the coordinates {0,0} are located at the center of the screen. If my element has a width of 500px, dropping it at a ...

Encountering a HTTP 404 error message upon completing the deployment of Angular application on Her

After going through this particular guide and also checking out another guide, I am currently in the process of deploying my Angular application on Heroku. I have two applications - one is running smoothly while the other is facing issues, leaving me puzz ...