Interactive collection

Chartist SVG Chart JS Library Demos

Download Back To CSSScript.Com

Shape a curve, stack a series, or watch the numbers move.
Explore the charts. Make them your own.

Loading the playground…

Find your flow

Daily sessions · two series, five ways to connect the dots

LINE / AREA

Interpolation

Area fillPointsMissing values

Current periodPrevious period

A different perspective

Quarterly orders · compare, stack, and switch direction

BAR

Arrangement

Value labelsTarget lineRounded ends

DirectSearchReferral

Parts of the whole

Traffic sources · change the shape

Chart style

Start angle 0°

100%Total traffic

DirectSearchReferralSocial

On the way

Monthly goal · set your progress

Progress 72%

Ring width

72%of monthly goal

Half-circle gauge

Two sides of the story

Revenue and margin · independent scales in one view

COMPOSED / DUAL AXIS

Composition

Revenue ($k)Margin (%)

Room to move

Weekly demand · the range, the average, and one location

RANGE BAND

Range bandAverage

Compare location

All locations: min–maxAverageSelected location

Connect the evidence

Temperature and sales · scatter & regression

Trend lineHighlight high sales

Hover, tap, or use arrow keys

See the bigger picture

Audience growth · from hundreds to millions

Vertical scale

Value labels

Each major step is a tenfold increase

In the moment

Simulated sensor readings · a rolling window of 24 samples

Paused

— bpm

Update interval

24 samples

A change of character

One dataset · text art or a static SVG snapshot

TEXT / SVG

Output