Chart Group 7 - Shared date range across chartsPro
A dashboard row where a single segmented date-range control (24h, 7d, 30d, 90d) updates a requests line chart, a daily errors bar chart and a platform split simultaneously from deterministic datasets. Use it whenever several charts must stay in sync with one filter.
About Chart Group 7
A dashboard row where a single segmented date-range control (24h, 7d, 30d, 90d) updates a requests line chart, a daily errors bar chart and a platform split simultaneously from deterministic datasets. Use it whenever several charts must stay in sync with one filter.
Chart Group 7 is a chart group block for React and Tailwind CSS, included in Chocolate UI Pro. It ships as 157 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- filter
- date-range
- tabs
- line
- bar
- synced
- interactive
Installation
- Set up your project with
npx chocolateui initandnpx chocolateui login(see the installation guide). - Run the Chocolate UI CLI:
npx chocolateui add chart-group-07Uses: card, reveal, utils.
Usage
import ChartGroup07 from "@/components/blocks/chart-group-07"
export default function Page() {
return <ChartGroup07 />
}