Chart Card 5 - Multi-line with legend togglesPro
Three product lines on one chart; legend chips toggle each series and the y-scale rescales to what is visible.
About Chart Card 5
Three product lines on one chart; legend chips toggle each series and the y-scale rescales to what is visible.
Chart Card 5 is a chart card block for React and Tailwind CSS, included in Chocolate UI Pro. It ships as 123 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.
- line
- multi-series
- legend
- toggle
- card
Installation
- Set up your project with
npx chocolateui initandnpx chocolateui login(see the installation guide). - Run the Chocolate UI CLI:
npx chocolateui add chart-card-05Dependencies installed automatically: lucide-react.
Uses: card, reveal, utils.
Usage
import ChartCard05 from "@/components/blocks/chart-card-05"
export default function Page() {
return <ChartCard05 />
}