Metric Flow Chart
Professional sales chart for anyone displaying data. Smooth Catmull-Rom curves, period switching, export to PNG/JPG/CSV/JSON. Fully customizable.
Make it with Workshop
Build your own component with AI
Professional sales chart for anyone displaying data. Smooth Catmull-Rom curves, period switching, export to PNG/JPG/CSV/JSON. Fully customizable.
Make it with Workshop
Build your own component with AI
A production-ready sales chart component for anyone who needs to present data beautifully. Perfect for portfolio projects, landing pages, client presentations, marketing sites, and yes—dashboards too. Built with performance optimization and attention to detail.
Four Time Periods:
Weekly (12 weeks)
Monthly (full year)
Quarterly (4 quarters)
Yearly (multi-year trends)
Four Export Formats:
PNG with retina support (2x resolution)
JPG for universal compatibility
CSV for spreadsheet integration
JSON for API consumption or backups
Complete Visual Control:
Typography system (family, size, weight, spacing)
Dual gradient configuration (colors + opacity)
Axis customization (grid, labels, colors)
Revenue display styling (indicators, backgrounds)
Card appearance (shadows, borders, padding)
Smart Responsive Design:
Adapts to any container width
Mobile-optimized touch support
Works perfectly on desktop and mobile
Accessibility with ARIA labels
Portfolio Projects
Agency Presentations
Landing Pages
Client Reports
Startup Pitch Decks
Educational Content
Personal Projects
No Code Required: Zero coding knowledge needed. Everything configures through Framer's visual property panel.
Saves Hours: What would take days to build from scratch or hours to customize with chart libraries is ready in minutes.
Looks Professional: Default styling that actually looks good out of the box. Customize if you want, or use as-is.
Actually Responsive: Not just "mobile-friendly"—intelligently adapts to every screen size with proper label management.
Export Ready: Generate presentation graphics, social media posts, or report images instantly. Perfect for any workflow.
SVG rendering for crisp visuals at any size, Framer Motion for smooth animations, React hooks for proper state management. Dynamic gradient generation prevents conflicts with multiple charts. Canvas APIs power image exports.
Works in static renders (for social media previews) and interactive contexts (for live websites). Ships with sensible defaults—customize only what you need.
