Stats With Bar Chart

About this block

Stats With Bar Chart is a two column stats section. The left column holds a heading, a short paragraph, and three stacked stats divided by hairline rules, each pairing a large value with a one line label. The right column is a bordered panel containing a twelve month bar chart built entirely from divs, with the most recent bar highlighted in the primary color and a caption that explains the data source.

The three stats and the twelve bars are plain arrays, so you can change every number, label, and bar height without touching the layout. The chart needs no charting library: each bar is a div with a percentage height, which keeps the block dependency free and theme aware. Swap the panel title and badge to relabel the chart for any metric.

When to use

Reach for this block when one trending metric tells your growth story better than a wall of numbers. It beats metric-tiles-band when the shape of the curve is the message, and it beats stats-with-sparklines when you want a single hero chart instead of four small trends. If you have no time series at all, split-numbers-with-copy makes the same pitch without the panel.

A natural flow around it on a Marketing Pro page:

Before

• Features to show the work that produces the curve

After

• Case Studies to attach a named customer to the trend
• CTAs to capture interest while the chart is still on screen

What you can display

One strong use is pipeline growth across a year of campaigns. A few other ways to use the chart panel:

• Adoption ramp. Plot weekly active users after launch and let the stats column carry activation and retention.
• Cost trend. Show acquisition cost falling month by month while the stats list the savings behind it.
• Volume scale. Chart messages sent or events tracked to prove the platform handles production load.

Tip: keep the bar heights monotonic enough to read as one trend, a single dip is fine but three dips start to look like noise.