--- title: "StatsHeroPro — Framer component · Best of Framer" description: "$25.00 · Framer component · by MJ Jung · Sections. Data visualization stats component" canonical: "https://framer.elliotli.dev/component/statsheropro" --- [Home](/)/[Components](/components)/[Sections](/components/category/sections)/StatsHeroPro # StatsHeroPro Data visualization stats component [View on Framer](https://framer.com/marketplace/components/statsheropro/?via=elliot-li) ![StatsHeroPro preview image 1](https://framer.elliotli.dev/og/component/statsheropro/8ea6b89d74a95984/1600x1200.jpg) ## Summary Data visualization stats component ## Description \# StatsHeroPro A dashboard-grade stats hero block for Framer. Each metric is its own card with optional gradient backgrounds, multi-series charts, multi-segment donut rings, value-labeled axes, and animated count-ups — all in one component, all responsive out of the box. \--- \## Why You'll Like It \- Cards that look like a real dashboard. Per-card gradient backgrounds, soft shadows, rounded corners, varied widths via Card Span (1–6). Mix a wide chart card with a narrow donut, just like the reference dashboards on Dribbble. \- Four polished visualizations per stat. Multi-series Sparkline (smooth gradient area fill), multi-series grouped Bar Chart, multi-segment Donut Ring (with center value, suffix, and sub-label), and Pictogram (icon repetition). Pick one per card and they all animate in sync with the count-up. \- Real chart axes. Y-axis grid lines with compact value labels (10K, 12만, 1.2M). X-axis category labels under the chart. Legend auto-renders for multi-series viz with colored dots and labels. \- Numbers that animate themselves. Each stat counts up from zero on scroll-in. Locale-aware formatting (US/UK/Korean/Japanese/Chinese/EU/BR) with optional compact mode so big numbers stay readable. \- Comparison badges that read themselves. Type \`+34% YoY\` and the badge picks the right color (green ▲) and arrow automatically. Toggle "Invert" for metrics where lower is better — like response time or churn — and the colors flip. \- Auto-fit responsive grid. Set a Min Column Width and the cards reflow automatically as the container shrinks. Or switch to fixed columns if you want strict control. \- Four design presets. Modern (cards on gray), Minimal (borderless on white), Bold (dark dashboard), Soft (pastel) — or go Custom for full control. \- Polished out of the box. Drop on the canvas and you immediately see a hero gradient card, a multi-series sparkline, a multi-segment donut, and a multi-series bar chart — all matching one of the dashboard inspirations on the marketplace. \--- \## Install Into Your Framer Project After purchase you'll receive a \`.txt\` file containing the component URL. 1\. Open the \`.txt\` file and copy the URL (Ctrl + C / Cmd + C). 2\. Go to your Framer dashboard and open the project where you want to use it. 3\. Click into the canvas. 4\. Paste the URL directly onto the canvas (Ctrl + V / Cmd + V). Framer will detect the link and place the component on your page. Drag, resize, configure from the right-side property panel. \--- \## Setup in 60 Seconds 1\. Drop the component on your canvas. 2\. Open the property panel on the right. 3\. Stats — open the array, replace the four sample cards with your real metrics. Each card has a Label, a Value, and a Visualization dropdown. 4\. Style Preset — pick Modern, Minimal, Bold (Dark), or Soft for an instant look. 5\. (Optional) Enable Gradient BG on a hero card and pick two colors. That's it. Scroll the section into view in the live preview and watch the cards animate. \--- \## Four Visualization Modes Each card has a Visualization dropdown. Pick one of: \### Sparkline (multi-line) Trend lines with optional smooth bezier curves and gradient area fill (top opaque → bottom transparent). Add multiple Series to compare two or more lines on the same chart with an auto legend. \### Bar Chart (grouped) Multi-series grouped bars. Each Series renders as its own colored bar at every X position, side by side. Perfect for "Sale 1 vs Sale 2 across 12 months." \### Donut Ring (multi-segment) Multiple Series each contribute a segment around the ring. The center can show the first segment's percentage, the stat value, or the total of all segments — your call. Add a sub-label like "Conversion" beneath the big percentage. \### Pictogram For "X out of Y" stories: "8 out of 10 customers recommend us." Pick any character or emoji as the icon, set Total Icons (e.g. 10), and the filled count is computed from the value. \### None Pure number — no visualization. Use for the cleanest, most minimal cards (or hero cards with a gradient background). \--- \## Card Spans for Varied Layouts Each stat card has a Card Span (1–6). The grid lays cards left to right; a card with span 2 takes the next two columns. Mix a 1-column gradient hero next to a 2-column chart next to a 1-column donut and you get a real-feeling dashboard, not just a row of equal squares. The default sample uses spans 1, 2, 1, 2 to demonstrate. \--- \## Real Chart Axes Turn on Y-Axis Grid for any chart-type stat and the chart automatically draws: \- Horizontal grid lines at "nice" intervals \- Value labels on the left (10K, 20K, 30K, 40K — or 1만, 2만, 3만 in Korean) Turn on X-Axis Labels and provide a comma-separated list of labels (e.g. \`Jan, Feb, Mar, Apr\` or \`1, 2, 3, 4\`). Labels space evenly under the chart. Both axes inherit colors and sizes from the Chart Axes group, so the look stays consistent across all your cards. \--- \## Multi-Series Setup Each stat has a Series array. Add one item per line / bar series: \- Label — used in the auto legend \- Data Points — comma-separated numbers (used by Sparkline + Bar) \- Value — single number (used by Donut as segment size) \- Color — drives the chart and the legend dot For a single-line sparkline, just add one series. For a multi-line comparison chart, add 2–3 series with different colors. The legend appears automatically below the chart when there are 2+ series. \--- \## What You Can Customize Every group below is a collapsible panel in the Framer property pane. \- Style Preset — Modern, Minimal, Bold (Dark), Soft, or Custom. \- Stats — full array of cards. Each one has its own Card BG (with optional Gradient), text colors, icon, comparison delta, viz settings, and series. \- Header — eyebrow + title + subtitle with full typography control. \- Card Style — default card BG, radius, padding, alignment, border, shadow, shadow intensity. \- Number Style — font family, size, weight, color, letter-spacing, locale, prefix/suffix sizing. \- Label Style — typography under the icon row. \- Description — optional sentence under the stat. \- Comparison Delta — up/down/neutral colors, arrow toggle, optional pill background. \- Visualization — chart height, sparkline (stroke/smooth/area gradient/dots), bar (gap/group gap/radius), donut (size/ring width/track/center text + suffix + sub-label), pictogram (columns/size/gap/off opacity). \- Chart Axes — grid color/stroke/dashed, Y label color/size, X label color/size/gap. \- Legend — show, spacing, font, color, dot size, item gap, alignment. \- Icon Style — optional icon next to the label (off by default for cleaner cards). \- Animation — scroll trigger, count-up duration, easing curve, stagger, play-once, viz draw-in. \- Layout — auto-fit responsive (with min column width) or fixed columns, gaps, container framing. \- Footer / Source — optional small line under the cards. Most designers only touch Stats, Style Preset, and a color or two. Pick a preset, edit your cards, ship. \--- \## Locale & Compact Formatting Set the Locale in Number Style. The component uses your browser's \`Intl.NumberFormat\`: | Value | Locale | Compact off | Compact on | |---|---|---|---| | 12500 | en-US | 12,500 | 12.5K | | 12500 | ko-KR | 12,500 | 1.3만 | | 4700000 | en-US | 4,700,000 | 4.7M | | 4700000 | ja-JP | 4,700,000 | 470万 | | 4700000 | de-DE | 4.700.000 | 4,7 Mio. | Compact mode is recommended for any metric with 5+ digits. The Y-axis labels use the same compact helper so big chart values like 40,000 render as 40K — exactly like the references. \--- \## Great For \- SaaS marketing pages ("Built for teams that ship") \- Investor decks rendered as web pages \- Annual report / year-in-review microsites \- Pricing pages (12K teams, 4.9★ rating, 99.98% uptime) \- Case studies showing client results \- Recruiting pages ("Why work here") \- Product launch pages with key metrics \- Anywhere a row of static numbers would work, but better \--- \## A Few Tips \- For headline impact, set Number Font Size to 40–60 and Letter Spacing to a slight negative (-1 to -1.5). \- Use a Gradient BG on one or two hero cards to break up the grid and create visual hierarchy. \- For multi-series charts, keep your colors complementary (e.g. orange + purple) — it reads more clearly than two similar shades. \- Y-axis grid is the single fastest way to make a card feel "dashboard-grade" instead of "marketing-fluff." \- For Korean / Japanese sites, set Locale appropriately so big numbers use the local convention (만, 億, 万). \- Use Card Span 2 on the chart cards and Card Span 1 on the donuts and gradient hero cards for the cleanest layouts. \--- \## Need Help? If a chart doesn't appear: \- Check that the Visualization dropdown isn't on "None". \- For Sparkline / Bar: each Series needs a Data Points field with at least 2 numbers. \- For Donut: each Series needs a Value > 0. \- For Pictogram: confirm Pictogram Icon and Total Icons are filled in. If the cards aren't reflowing on small screens: \- Make sure Auto-Fit Columns is on in the Layout group. \- Lower Min Column Width (default 260) if you want narrower cards. If a stat looks crowded: \- Increase the card padding (Card Style → Padding). \- Enable Compact mode for big numbers. \- Reduce decimal places if you don't need them. Everything else just works. ## Rank history [How rankings work →](/terms#rankings) - All · #5867 ## Details - **Author**: MJ Jung - **Price**: $25.00 - **Published**: 2026-05-14 - **Updated**: 2026-05-14 - **Added**: 2026-05-10 - **Categories**: Sections ## More like this - [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll - [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles - [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery - [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes