Welcome to our collection of hand-picked free HTML and CSS chart and graph code examples. These examples have been sourced from CodePen, GitHub, and other resources. This is an update of our July 2023 collection, and we’re excited to share 3 new items with you.

CSS offers a range of benefits for creating charts and graphs:

  • flexibility: CSS allows for a high degree of customization, enabling you to create charts and graphs that match your website’s aesthetic.
  • interactivity: with CSS, you can create interactive charts and graphs that respond to user input, enhancing user engagement.
  • performance: CSS-based charts and graphs load quickly and perform well, even on lower-end devices.

We invite you to explore our collection of CSS charts and graphs. Whether you’re a seasoned developer or just starting out, we’re confident you’ll find something here to inspire your next project.

Remember, all the items in our collection are free to use. So why wait? Start exploring today!

Related Articles

  1. jQuery Charts And Graphs
  2. Tailwind Charts And Graphs

Author

  • Hannah

Made with

  • HTML / CSS (SCSS)

About a code

Progress Donut Charts

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

Responsive: no

Dependencies: -

Author

  • Adam Argyle

Made with

  • HTML / CSS / JS (Babel)

About a code

Gradient Circle Outline Bound to Angle

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

Responsive: yes

Dependencies: -

Author

  • Mark Boots

Made with

  • HTML / CSS

About a code

Simple CSS Bar Chart

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

Responsive: yes

Dependencies: -

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: -