How to select the chart

[Lakshminarayanan]

I take the pie chart in the data 72 males and 25 females. if I click the male data to find out the full details of 72 males in the grid. same way if click the females data I should be able to get the full details. please help me to do in a better way. waiting for your reply.

[Nishanthi Panner Selvam]

Hi Lakshminarayanan,

Greetings from Syncfusion.

Thank you for inquiring about creating an interactive pie chart and grid to display data. We can achieve this by using pointClick in the pie chart. Based on the pointClick in pie, we can update the dataSource in the grid.

We have created sample for your reference.

Code-snippet:

pointClick: (args) => {

    const selectedDataPoint: DataPoint | undefined = chartData.find(

      (dataPoint) => dataPoint.x === args.point.x

    );

    if (selectedDataPoint) {

      // Clear the previous data from the grid

      grid.dataSource = [];

      // Generate and update the grid's data source for 72 data points

      for (let i = 1; i <= 72; i++) {

        const dob = generateDob(i, selectedDataPoint.x);

        (grid.dataSource as GridData[]).push({

          No: i,

          gender: selectedDataPoint.x,

          dob,

        });

      }

      grid.refresh();

    }

  },

});

Screenshot:

Sample: https://stackblitz.com/edit/6wyrxy-rvvzf8?file=index.ts,index.html

Kindly revert us if you have any concerns.

Regards,

Nishanthi