Can't select a point in series in component source code

[Akshay Rana]

Is there any way to select a point of series in your component.

"selectedDataIndexes" does not work after the chart has rendered.

Example: select a point by index on button click :
https://stackblitz.com/edit/angular-hehuvj-ati7xz?file=app.component.ts

[Kalaimathi Chellaiah]

Hi Akshay, 

 

Greetings from Syncfusion. 

 

We have analyzed your query. From that we would like to let you know that the series not refreshed when we used selectedDataIndex property through button click. That’s why the problem is occurred. By calling chart refresh() method, you can resolve this problem. We have modified the attached sample. Now point selection is working fine as you expect. Please find below, 

 

Code Snippet: 

selectIndex(i: number) { 

    this.chart.selectedDataIndexes = [{series: 0, point: i}]; 

    this.chart.refresh(); 

    // select element on index i  

  } 

 

 

Screenshots: 

Initial Rendering	After Button Click

 

Sample: https://stackblitz.com/edit/angular-hehuvj-dg8ghv?file=app.component.ts 

 

Please let me know if you have any queries. 

Regards, 

Kalai. 

[Amalia Chrysanthakopoulou]

Hello,

The refresh method causes the re-rendering of the whole component that makes the UX pretty bad.

Are there any plans to improve this?

My requirement is to change the selection run-time everytime the user clicks an item at the grid so re-rendering the chart is pretty bad on my case.

Is there any workaround that will not the component to re-render?

Thank you.

[Swetha Babu]

Hi Amalia,

Greetings from Syncfusion.

We suggest upgrading your package to the latest version (v26.2.10) to resolve the reported issue. In this version, the chart renders correctly without needing to call the refresh method. We have created an Angular application using this latest version to demonstrate the same. Please find the below stckblitz link for your reference.

Sample link: https://stackblitz.com/edit/angular-4pwgzf-krv4ly?file=app.component.html

Code Snippet:

selectIndex(i: number) {

      this.chart.selectedDataIndexes = [{series: 0, point: i}];    

      // select element on index i

   }

Screenshot:

Initial rendering:

After clicking on CLICK button:

Kindly revert us if you have any concerns.

Regards,

Swetha