Collection of free HTML and pure CSS chart and graph code examples from Codepen and other resources.

Demo image: CSS-only Pie Charts

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

CSS-only Pie Charts

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Skills Chart Animation with a Bit of Houdini Magic

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Pure CSS Area Chart

Author

  • Rami

Made with

  • HTML / CSS

About a code

Pure CSS Area Chart

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Graph

Author

  • Jorge Mendes

Made with

  • HTML / CSS

About a code

Graph

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Pure CSS Donut Charts

Author

  • Jerry Low

Made with

  • HTML (Slim) / CSS (SCSS)

About a code

Pure CSS Donut Charts

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Pure CSS Background Depending on Height

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Pure CSS Background Depending on Height

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: HTML Chart

Author

  • sean_codes

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

HTML Chart

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: This Pen is 19% HTML & 81% CSS

Author

  • Bence Szabo

Made with

  • HTML / CSS

About a code

This Pen is 19% HTML & 81% CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Purple Pie Chart

Author

  • Anjanas_dh

Made with

  • HTML / CSS (SCSS)

About a code

Purple Pie Chart

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Sabine Robart

Made with

  • HTML / CSS (SCSS)

About a code

Statistics Card

Financial chart UI design, animated SVG line. Tooltips on hover. No jQuery, no JavaScript involved.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Olivia Ng

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

CSS Animation: A Line Graph

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: simple-line-icons.css, jquery.js

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Interactive, Responsive Pie Chart

Interactive, responsive pie chart with conic-gradient(), CSS variables & Houdini magic.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Simple and Responsive Organizational Chart

Author

  • Erin E. Sullivan

Made with

  • HTML / CSS

About a code

Simple and Responsive Organizational Chart

HTML5 and CSS3 only simple and responsive organizational chart.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Bar Graph

Author

  • Champlow

Made with

  • HTML / CSS (Less)

About a code

Bar Graph

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Charles Hayter's Colour Diagrams

Author

  • Chen Hui Jing

Made with

  • HTML / CSS (SCSS)

About a code

Charles Hayter's Colour Diagrams

An attempt to recreate the colour diagrams in Charles Hayter's “A New Practical Treatise on the Three Primitive Colours Assumed as a Perfect System of Rudimentary Information”.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Nick Walsh

Made with

  • HTML / CSS (Sass)

About a code

Diagram

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Interactive SVG & CSS Graph

Author

  • Explosion AI

Made with

  • HTML (Pug) / CSS (Sass)

About a code

Interactive SVG & CSS Graph

Interactive SVG & CSS graph with segments, legend and hover effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Vanessa

Made with

  • HTML / CSS

About a code

Animated CSS Graph

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: chart.css

Author

  • Matheus Falcão

Made with

  • HTML / CSS (SCSS)

About a code

chart.css

A simple CSS chart system.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: chart.css

Demo image: Pure CSS Bars

Author

  • Rafael González

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS Bars

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: CSS Only 3D Bar Graph

Author

  • Tim Ruby

Made with

  • HTML / CSS

About a code

CSS Only 3D Bar Graph

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Circle Chart With Three Bars

Author

  • Chris Coyier

Made with

  • HTML / CSS (SCSS)

About a code

Circle Chart With Three Bars

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Wicked CSS3 3D Bar Chart

Author

  • Marcofolio.net

Made with

  • HTML / CSS

About a code

Wicked CSS3 3D Bar Chart

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -