A React component that synchronizes chart and DataTable (shadcn / Tanstack) views, built with shadcn charts / Recharts.

• 📊 Synchronized chart and table views
• 🔍 Interactive chart selection filters table data
• 📅 Multiple date format options (Month, Quarter, Year, etc.)
• 📈 Configurable chart types (Area, Bar)

This project was built upon by the work done in zoom-chart-demo by @shelwin_

1. Copy LinkedChart to your repo and import in your DataTable component:

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

2. Define how you want to aggregate your data for the chart:

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

3. Inside your <DataTable>, call the <LinkedChart> component:

<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" />

See https://github.com/ardasisbot/linked-chart/blob/main/app/examples/data-table.tsx for a complete example.

Check out a full implementation example with DataTable integration.

You can also use the <LinkedChart> component without <DataTable> component. Useful for standalone charts.

<LinkedChart data={data} // columns={columns} // setColumnFilters={table.setColumnFilters} dateField="posting_date_unix" aggregatorConfig={chartAggregatorConfig} chartType="bar" title="Linked Chart" />

• shadcn/ui / Recharts
• date-fns

MIT

@asisbot