Encountering a challenge with triggering a dialog box from an onClick event on a pie chart in Angular 8 when utilizing chart.js

I am currently using a chart.js pie chart to showcase some data. I have managed to display the required information in an alert box when a slice of the pie is clicked. However, I am now looking for a way to present this data in a dialog box instead.

 'onClick': function(e) {
          var activePoints = this.getElementsAtEvent(e);
          var firstPoint = activePoints[0];
          console.log(firstPoint)
          var label = this.data.labels[firstPoint._index];
          var list = this.data.list;
          if (firstPoint!= undefined) {
            for (let i = 0; i< list.length; i++) {
              if (label === list[i].label) {
                console.log(list[i].value);
                alert(label + ":" + list[i].value);
                
<chart type="pie" [data]="data" [options]="options"></chart>

angulartypescriptchart.jspie-chart

Answer №1

  let  stockChart =  new  CanvasJS.Chart("stocksContainer",
{
 .
 .
 data: [{

  click: function(e){
    alert(  e.dataSeries.type+ ", Point of Data { x:" + e.dataPoint.x + ", y: "+ e.dataPoint.y + " }" );
   },

  },
 ]
 .
 .
});
stockChart.render();

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

Navigating horizontally to find a particular element

I developed a unique Angular component resembling a tree structure. The design includes multiple branches and nodes in alternating colors, with the selected node marked by a blue dot. https://i.stack.imgur.com/fChWu.png Key features to note: The tree&ap ...

javascriptangulartypescript

Issue with Angular Route Guard - Incorrect redirection to login page

I'm encountering an issue with my Angular app where even after the JWT token has expired, I am still able to navigate within the application without any API data being accessible. I've double-checked my setup and it seems right, but for some reas ...

javascriptangularauthenticationauthorizationauth-guard

The visualization rendered by ChartJS is not displaying correctly when data is fetched using an AJAX call

When it comes to creating visualizations from static datasets using ChartJS, I have no problems. However, the issue arises when I try to use data fetched via an AJAX call - the visualization does not render properly. Surprisingly, no errors are thrown even ...

javascriptjqueryajaxchart.js

What causes TypeScript to malfunction when using spread in components?

What is the reason for typescript breaking when props are sent to a component using a spread statement? Here's an example code snippet: type SomeComponentProps = Readonly<{ someTitle: string }> const SomeComponent = ({ someTitle }: SomeCompo ...

reactjstypescriptjsxlinter

Error Message: Angular Unit Test Fails with "Cannot read property 'subscribe' of undefined"In this article, we will

My Angular app's unit tests using Jest are giving me the error "TypeError: Cannot read property 'subscribe' of undefined". Despite searching online, none of the solutions provided seem to work for me. Below is some relevant code: page-view. ...

angulartypescriptunit-testingmockingobservable

Testing RxJS Observables in Angular: Simulating with Jasmine mocks

My current task involves unit testing an Angular 12 component. The main functionality of the component is to fetch an observable from a service during initialization, which is then assigned to a Subject. This Subject is displayed in the HTML template by us ...

angularjasmineangular12

The operation failed because the property 'dasherize' is inaccessible on an undefined object

While attempting to execute the following command: ng generate component <component-name> An error occurred saying: Error: Cannot read property 'dasherize' of undefined Cannot read property 'dasherize' of undefined The confi ...

javascriptangularnpmangular-cliangular5

Managing nested request bodies in NestJS for POST operations

A client submits the following data to a REST endpoint: { "name":"Harry potter", "address":{ "street":"ABC Street", "pincode":"123", "geo":{ &q ...

node.jstypescriptnestjs

Trouble with React Context State Refreshing

Exploring My Situation: type Props = { children: React.ReactNode; }; interface Context { postIsDraft: boolean; setPostIsDraft: Dispatch<SetStateAction<boolean>>; } const initialContextValue: Context = { postIsDraft: false, setPostIs ...

reactjstypescript

.bail() function does not function properly when used in conjunction with express-validator

While registering a new user, I require their name, email, and password. If no name is provided, there is no need for the backend to validate the email. I believe that the use of .bail() in express-validator should handle this situation, but unfortunately ...

typescriptexpressvalidationprismaexpress-validator

Setting up Bootstrap 5 with the latest version of Angular, which is Angular

I attempted to install Bootstrap in Angular 13 using the following link: However, after updating to bootstrap v5, the styles are not displaying correctly. Interestingly, it works fine with bootstrap 4.6.1. I followed all the steps in the provided link. I ...

javascriptangularbootstrap-5angular13

Adding a language dynamically with Transloco: A step-by-step guide

I'm currently developing an app using Angular 8 and NativeScript 6.4.1. After some research, I am leaning towards utilizing Transloco as my translations library. An essential requirement for my app is the ability to dynamically change the language a ...

angularnativescripttransloco

onmouseleave event stops triggering after blur event

I am facing an issue with a mouseleave event. Initially, when the page loads, the mouseleave event functions correctly. However, after clicking on the searchBar (click event), and then clicking outside of it (blur event), the mouseleave functionality stops ...

javascripthtmltypescriptblurmouseleave

In Typescript, it is possible to provide values other than undefined for a parameter that is

I experimented with the code below in TypeScript Playground with all settings enabled. My expectation was that the TS compiler would only allow the first call() to be valid. However, to my surprise, all four calls were accepted. Upon inspecting the calls, ...

typescript

What is the best way to observe a method with multiple signature overloads in karma/jasmine?

I am using angular along with karma and jasmine for unit testing. One of the methods in my HttpService has multiple signatures like so: public sendRequest<T>(path: string, observable?: false): Promise<T>; public sendRequest<T>(path: ...

angularjasminekarma-jasmine

The field 'password' is not found in the 'User' array type

I'm encountering an issue with my Typescript code: Property 'password' does not exist on type 'User[]'.ts(2339). Do I need to create an interface or something similar? Thank you in advance. usersRouter.post("/", async ...

node.jstypescript

Setting the value of a select input in a reactive form

I am facing an issue with autofilling the select input on my form. Even though I've written the code, the value of the select field remains empty when the form loads. In my code, I have declared a static array of objects called extensions which conta ...

angularforms

What is the best way to retrieve app.state in a Remix project when running a Cypress test?

One way Cypress can expose an app's state to the test runner is by using the following approach in React: class MyComponent extends React.Component { constructor (props) { super(props) // only expose the app during E2E tests if (window.C ...

javascripttypescriptstatecypressremix.run

Techniques for adding data to an array using TypeScript

I am working on a project that involves creating a dynamic menu bar by fetching data from two different collections (supcat and cat) in order to combine them into a new array. However, I am encountering an issue with the push() method not working as expe ...

node.jsangularmongodbtypescriptarray-push

Is it true that Angular 16 does not have compatibility with the ng search filter feature?

Is it true that Angular 16 does not support the ng search filter? I encountered an error when trying to implement it, saying "the library (ng2-search-filter) which declares Ng2SearchPipeModule is not compatible with Angular Ivy". Looking for suggestions o ...

angularangular-material