React Component for Linked Charts and Data Tables with Interactive Filtering

Description:

Linked Chart & Table Component is a React library that connects chart visualizations with data tables through interactive filtering. Built on shadcn/ui, Recharts, and Tanstack Table.

You can configure multiple chart types and date aggregation formats. Chart selections automatically apply filters to the connected DataTable. This approach maintains consistency between visual and tabular data representations.

It works with existing shadcn UI components and Tanstack Table implementations. The library is ideal for developers building analytical dashboards requiring coordinated views.

Features

• 📊 Chart-Table Synchronization: Click any segment in the chart to automatically filter the corresponding rows in your data table.
• 🔍 Interactive Data Filtering: Chart selections apply instant filters to table data without manual configuration.
• 📅 Flexible Date Formatting: Group your data by month, quarter, year, or custom date intervals to match your reporting needs.
• 📈 Multiple Chart Types: Switch between area and bar chart visualizations depending on your data presentation requirements.
• 🔧 Custom Data Aggregation: Define your own aggregation functions to calculate metrics like totals, averages, or conditional sums.
• 🎯 Standalone Mode: Use the chart component independently without a data table when you only need visualization.

Use Cases

• Financial Transaction Dashboards: Click on spending peaks in a monthly chart to view the specific transactions that occurred during that period, making it easy to audit expenses or identify unusual patterns.
• E-commerce Analytics: Display revenue trends over time and filter the order table to show only transactions from selected date ranges, helping managers investigate sales performance.
• Project Management Tools: Visualize task completion rates by quarter and drill down into the exact tasks completed during selected time periods.
• Healthcare Data Platforms: Show patient visit trends across months and filter patient records to display only visits from specific time windows for targeted analysis.

How to Use It

1. Install the required dependencies in your React project. You need shadcn/ui components, Recharts for charting, Tanstack Table for table functionality, and date-fns for date manipulation.

npm install @tanstack/react-table recharts date-fns
npx shadcn-ui@latest add chart table

2. Copy the LinkedChart component file from the GitHub repository into your project’s components directory. The component file is available at the linked-chart repository under components/linked-chart.tsx.

3. Import the LinkedChart component into your DataTable component file.

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

4. Define an aggregator configuration object that specifies how to calculate metrics from your data. Each key represents a metric name, and each value is a function that processes individual data rows.

const chartAggregatorConfig = {
  revenue: (order) => order.amount,
  profit: (order) => order.amount - order.cost,
  highValue: (order) => (order.amount > 1000 ? order.amount : 0),
}

5. Add the LinkedChart component inside your DataTable render function. Pass the filtered row data, column definitions, filter setter function, date field name, aggregator config, chart type, and title as props.

<LinkedChart
  data={table.getFilteredRowModel().rows.map((row) => row.original)}
  columns={columns}
  setColumnFilters={table.setColumnFilters}
  dateField="created_at"
  aggregatorConfig={chartAggregatorConfig}
  chartType="area"
  title="Revenue Overview"
/>

The component will render a chart above your table. Clicking any chart segment filters the table to show only rows matching that time period. The date field you specify must be a Unix timestamp or date string that date-fns can parse.

6. You can also use LinkedChart without a DataTable by omitting the columns and setColumnFilters props. This works for standalone visualizations where you only need the chart display.

<LinkedChart
  data={salesData}
  dateField="sale_date"
  aggregatorConfig={salesAggregatorConfig}
  chartType="bar"
  title="Monthly Sales"
/>

The component automatically handles date grouping based on your data’s time range. Short periods default to daily grouping, while longer periods group by month or quarter.

Related Resources

• shadcn/ui Charts: Official documentation for the chart components that power LinkedChart’s visualizations.
• Tanstack Table: Complete reference for the table library used to manage data display and filtering.
• Recharts Documentation: API reference and examples for the underlying charting library.
• date-fns: Date manipulation utilities used for grouping and formatting timestamps.

FAQs

Q: What date formats does the dateField prop accept?
A: The component accepts Unix timestamps (numbers) or any date string format that date-fns can parse, including ISO 8601 strings and common date formats.

Q: Can I customize the chart colors or styling?
A: The component uses shadcn/ui theming, so you can customize colors through your shadcn configuration. The chart inherits your project’s color tokens.

Q: Does the component work with server-side data fetching?
A: Yes, pass server-fetched data to the data prop. The component handles client-side filtering and visualization after data loads.

Q: Can I add multiple aggregated metrics to a single chart?
A: Yes, define multiple functions in your aggregatorConfig object. Each key creates a separate metric line or bar in the chart.