I have created a data table with two columns. First column has string data type and second column has numerical values. I have added date filters as well. Right now, I trying to create a pie chart with the same data as in the data table to appear besides the data table. Furthermore, when date filter changes, the data should change accordingly in both data table and pie chart? To achieve this, do I need to use lightning layout item? Or is there any other way? If someone can share some related resources, it would be great.
Yes, you can use lightning-layout and lightning-layout-item to create a layout where a data table and a pie chart appear side by side.
Create two separate components:
- c-data-table: To display data in a tabular format using lightning-datatable. Implement date filters for dynamic updates.
- c-pie-chart: Visualize data as a pie chart using a charting library like Chart.js or the lightning-chart component.
Then manage data state in the main parent component where lightning-layout is used. Make sure that both the data table and pie chart update synchronously when date filters change. You can use event handlers (handleDateSelect, handleDateChange) to facilitate this synchronization.
Useful Resources: https://developer.salesforce.com/docs/component-library/bundle/lightning-layout-item/example
https://developer.salesforce.com/docs/component-library/bundle/lightning-layout/example
https://salesforcelabs.github.io/LightningWebChartJS/
https://help.salesforce.com/s/articleView?id=sf.os_chart_lightning_web_component_readme.htm&type=5
https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/example
Thanks!
