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

Related Articles

  1. jQuery Charts And Graphs
  2. Tailwind Charts And Graphs
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: -