Chartist - Examples

Line chart examples

Simple line chart

MondayTuesdayWednesdayThursdayFriday051015

Holes in data

12345678910111213141516051015

Filled holes in data

12345678910111213141516051015

Only whole numbers

12345678-3-113

Line scatter diagram with responsive settings

W1W5W9W13W17W21W25W29W33W37W41W45W4904080

Line chart with area

1234567802468

Bi-polar Line chart with area only

-3-113

Using events to replace graphics

1234557911

Advanced SMIL Animations

123456789101112051015

SVG Path animation

MonTueWedThuFriSat02468

Line Interpolation / Smoothing

12345051015

Series Overrides

12345678-50510

Time Series with Moment.js

Jul 15Jul 16Jul 17Jul 18Jul 19102030405060

Bar chart examples

Bi-polar bar chart

W1W3W5W7W9-10-50510

Overlapping bars on mobile

JanFebMarAprMayJunJulAugSepOctNovDec02.557.510

Add peak circles using the draw events

W1W3W5W7W9-10-50510

Multi-line labels

First quarter of the yearSecond quarter of the yearThird quarter of the yearFourth quarter of the year0 CHF20000 CHF40000 CHF60000 CHF80000 CHF

Stacked bar chart

Q1Q2Q3Q40k1000k2000k3000k

Horizontal bar chart

SundaySaturdayFridayThursdayWednesdayTuesdayMonday00.31250.6250.93751.251.56251.8752.18752.52.81253.1253.43753.754.06254.3754.687555.31255.6255.93756.256.56256.8757.18757.57.81258.1258.43758.759.06259.3759.687510

Extreme responsive configuration

Quarter 1Quarter 2Quarter 3Quarter 402468

Distributed series

XSSMLXLXXLXXXL050100150200

Label placement

MonTueWedThuFriSatSun02.557.510

Pie chart examples

Simple pie chart

42%25%33%

Pie chart with custom labels

BananasApplesGrapes

Gauge chart

Animating a Donut with Svg.animate

Donut chart using fill rather than stroke

20103040

Gauge chart using fill rather than stroke

20103040