React chart - custom "toolbar" and action on click.

[JORGE V]

Hi,

   In chart component 

   1) Chart with "toolbar"

  

   I would like to add a "toolbar" (or something similar) in a chart (similar to zoom toolbar).

   Then, the user could chosse "action 1", "action 2", "action 3".

   Then, each action modifies a value of the state and the chart is refreshed.

   Is there any way to add a "custom toolbar" in chart with three actions ?. 

   2) "click" on columns. 

   I have a chart of type stacking column.

   Now, if the user does click on column Y the tooltip is displayed (label X, label Y, value are displayed in tooltip).

   But I would like to open a dialog, retrieve the values X,Y, value and execute an action on the set of data selected.

   

   Is there any way to do this ?. 

   

Thanks in advance.!

Jorge   

[Durga Gopalakrishnan]

Hi Jorge, 

We are working on your reported requirement. We will update the sample within one business day(20^th May 2021). We appreciate your patience until then. 

Regards, 

Durga G

[Durga Gopalakrishnan]

Hi Jorge, 

Thanks for being patience. We have prepared sample based on your requirement. Please check with the below snippet and sample. 

1) Chart with "toolbar" 

This requirement can be achieved using chart annotations. We have refreshed chart using chartMouseClick event when annotation is clicked. 

onChartMouseClick(args){ 

      if(args.target ==  "annotation1"){ 

        for(let i = 0; i< this.chart.series.length; i++){ 

          this.chart.series[i].type = "StackingBar"; 

        } 

        this.chart.refresh(); 

      } 

      else  if(args.target ==  "annotation2"){ 

       //… 

      } 

      else  if(args.target ==  "annotation3"){ 

        // customize your code here 

      } 

    } 

 

2) "click" on columns 

We request you to use pointClick event to display dialog box on clicking the chart series points. In dialog, we have displayed corresponding series index and point index values. You can customize it based on your need. 

OnPointClick(args){ 

      this.setState({ hideDialog: true }); 

      this.dialogInstance.content = "PointIndex : " + args.pointIndex + " SeriesIndex : "+ args.seriesIndex; 

    } 

 

Sample : https://stackblitz.com/edit/react-cywbnn 

UG :  

https://ej2.syncfusion.com/react/documentation/dialog/getting-started/#run-the-application 

https://ej2.syncfusion.com/react/documentation/chart/chart-annotations/ 

Please revert us if you have any concerns. 

Regards, 

Durga G

[JORGE V]

Hi Durga G.

I've added annotations and pointClick method to chart. 

It works ! Than you.

Jorge

[Durga Gopalakrishnan]

Hi Jorge, 

Most welcome. Please get back to us if you have any concerns. We are always happy in assisting you. 

Regards, 

Durga G