Linked Chart & Table Component

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

Features

• 📊 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_

Quick Start

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.

Complete Example

Check out a full implementation example with DataTable integration.

Notes

You can also use the component without component. Useful for standalone charts.

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

Dependencies

• shadcn/ui / Recharts
• date-fns

License

MIT

Author

@asisbot