StatusEmailAmountPosting Date
successken99@yahoo.com316
2023-01-01
successAbe45@gmail.com242
2023-01-03
processingMonserrat44@gmail.com837
2023-01-05
successSilas22@gmail.com874
2023-01-07
failedcarmella@hotmail.com721
2023-01-09
processingJane21@yahoo.com545
2021-02-22
successJohn29@outlook.com854
2021-11-13
failedChris34@gmail.com611
2021-04-05
successTaylor72@hotmail.com422
2020-12-07
processingAlex18@gmail.com688
2021-05-09
  • Built with

    shadcn charts

    /

    recharts

  • Chart and table are synced: updated in one, reflected in the other
  • Drag on the chart to filter the table
  • Edit chart display from the menu
  • Copy the single file source code

    • 1

    Import LinkedChart in your DataTable component

    import { LinkedChart } from '@/components/linked-chart'
    2

    Define how you want to aggregate the data for the chart

    const chartAggregatorConfig = {
    amount: (transaction: any) => (transaction.amount > 0 ? transaction.amount : 0),
    largeAmount: (transaction: any) => (transaction.amount > 500 ? transaction.amount : 0),
  };
    3

    Call the LinkedChart component inside your DataTable

    <LinkedChart 
	data={table.getFilteredRowModel().rows.map((row) => row.original)} 
	columns={columns}
	setColumnFilters={table.setColumnFilters}
	dateField="posting_date_unix" 
	aggregatorConfig={chartAggregatorConfig}
	chartType="area"  
	title="Linked Chart"
	/>
made by @asisbot