ChartsCSS

Charts.css help frontend developers turn data into beautiful charts and graphs using simple CSS classes.

Area chart
Jan 144 50
Feb 254 116
Mar 230 184
Apr 479 114
May 184 150
Jun 194 114
Jul 210 140
Aug 230 212
Sep 479 374
Oct 194 114
Nov 194 114
Line chart
Jan 36
Feb 48
Mar 18
Apr 24
May 26
Jun 44
Jul 22
Aug 52
Sep 24
Oct 38
Nov 38
Bar chart
Jan 44
Feb 54
Mar 30
Apr 79
May 84
Jun 94
Jul 10
Aug 30
Sep 79
Oct 94
Column chart
Jan 44
Feb 54
Mar 30
Apr 79
May 84
Jun 94
Jul 10
Aug 30
Sep 79
Oct 94
Bar chart
Multiple data
Reverse Data & Datasets Example #1
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2020 20 50 100 70 40
2021 90 60 40 70 100
2022 20 40 60 80 100
Column chart
Multiple data
Reverse Data & Datasets Example #1
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2020 20 50 100 70 40
2021 90 60 40 70 100
2022 20 40 60 80 100
Animation chart
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2020 20 50 100 70 40
2021 90 60 40 70 100
2022 20 40 60 80 100
Nifty

Background Images

Add an image to replace the solid background color
Layouts
Layouts
Transitions
Header
Additional Offcanvas New in BS v.5.0

Select the offcanvas placement.

Sidebars
Navigation
Right sidebar
Color Schemes
Light Completely bright color themes.
Dark Completely dark color themes.
Expanded Header
Fair Header
Full Header
Primary Nav
Brand
Tall Header New in v3.0
Scrollbars

Hides native scrollbars and creates custom styleable overlay scrollbars.

Offcanvas Header
Content Here

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente eos nihil earum aliquam quod in dolor, aspernatur obcaecati et at. Dicta, ipsum aut, fugit nam dolore porro non est totam sapiente animi recusandae obcaecati dolorum, rem ullam cumque. Illum quidem reiciendis autem neque excepturi odit est accusantium, facilis provident molestias, dicta obcaecati itaque ducimus fuga iure in distinctio voluptate nesciunt dignissimos rem error a. Expedita officiis nam dolore dolores ea. Soluta repellendus delectus culpa quo. Ea tenetur impedit error quod exercitationem ut ad provident quisquam omnis! Nostrum quasi ex delectus vero, facilis aut recusandae deleniti beatae. Qui velit commodi inventore.