{"repo":"ardasisbot/linked-chart","free":true,"listed":false,"github":"https://github.com/ardasisbot/linked-chart","clone":"git clone https://github.com/ardasisbot/linked-chart.git","description":"Recharts-based chart synced with TanStack DataTable, enabling data exploration through linked filtering and aggregation.","language":"TypeScript","stars":69,"topics":["nextjs","recharts","shadcn-ui","tanstack-table"],"license":null,"category":"ui-components","readme_excerpt":"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: 2. Define how you want to aggregate your data for the chart: 3. Inside your , call the component: 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. Dependencies - shadcn/ui / Recharts - date-fns License MIT Author @asisbot","default_branch":null,"files":null,"tree":[],"storefront":"/r/ardasisbot","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/ardasisbot/linked-chart/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}