Skip to content

ChartsPro

21 effects for the charts family · every one loops · pure CSS unless a card says otherwise

The previews are open to everyone; the code of these effects comes with WunderUI Core and Pro.

The line draws first, the fill rises under it. Never both at once.

Pure CSSCharts
MoTuWeThFr

Grid, then data, then labels. Labels last or they read before the chart.

Pure CSSCharts
BerlinHamburgKölnMünchen

Rows travel to their new rank instead of re-rendering in place.

Pure CSSCharts

Bar Chart · Column Chart · Funnel Chart.

Pure CSSCharts

Largest first would look staged, so they pop in reading order.

Pure CSSCharts

Wicks scale with the body because they are a pseudo-element of it.

Pure CSSCharts
31.6k27.9k38.4k35.2k42.8k

A crosshair walks the series point by point, and the dot follows the line itself rather than cutting between points.

Pure CSSCharts
68%

The ring and the number run on one timeline, so they finish together.

Pure CSSCharts

Segments fill top-down, which is how a funnel is read.

Pure CSSCharts
72

@property lets the conic angle overshoot and settle.

Pure CSSCharts
RevenueCostsMargin

Hovering one series dims the rest instead of highlighting one.

Pure CSSCharts

The dot rides the same path the line draws.

Pure CSSCharts
● live

The newest bar enters, the oldest leaves the frame.

Pure CSSCharts

Radar Chart · Polygon Chart.

Pure CSSCharts

The brush is the only chart control users drag, so it gets real handles.

Pure CSSCharts
70%50%85%

Three rings sweeping together, each to its own value.

Pure CSSCharts

Points land first, the trend line draws through them after.

Pure CSSCharts

Slices fan into place instead of appearing.

Pure CSSCharts

Segments stack bottom-up per column, columns left to right.

Pure CSSCharts

Only the bars past the line change colour, and only after they finish growing.

Pure CSSCharts

Each step starts where the last one ended, with a connector.

Pure CSSCharts