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

Explore a collection of free HTML and pure CSS chart and graph code examples from Codepen and other resources to add visually appealing data visualizations to your website.

Progress Donut Charts

Author:
Hannah | March 9, 2023
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Gradient Circle Outline Bound to Angle

Author:
Adam Argyle | February 12, 2023
Made with:
HTML / CSS / JS (Babel)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Simple CSS Bar Chart

Author:
Mark Boots | October 27, 2022
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
CSS-only Pie Charts

CSS-only Pie Charts

Author:
Temani Afif | January 6, 2022
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Skills Chart Animation with a Bit of Houdini Magic

Author:
Ana Tudor | May 28, 2021
Made with:
HTML (Pug) / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Pure CSS Area Chart

Pure CSS Area Chart

Author:
Rami | November 19, 2020
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Graph

Graph

Author:
Jorge Mendes | June 3, 2020
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Pure CSS Donut Charts

Pure CSS Donut Charts

Author:
Jerry Low | April 20, 2020
Made with:
HTML (Slim) / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Pure CSS Background Depending on Height

Pure CSS Background Depending on Height

Author:
Ana Tudor | May 21, 2019
Made with:
HTML (Pug) / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
HTML Chart

HTML Chart

Author:
sean_codes | April 17, 2019
Made with:
HTML (Pug) / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
This Pen is 19% HTML & 81% CSS

This Pen is 19% HTML & 81% CSS

Author:
Bence Szabo | April 13, 2019
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Purple Pie Chart

Purple Pie Chart

Author:
Anjanas_dh | January 29, 2019
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Statistics Card

Author:
Sabine Robart | January 13, 2019
Made with:
HTML / CSS (SCSS)

About a code

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

CSS Animation: A Line Graph

Author:
Olivia Ng | October 29, 2018
Made with:
HTML (Pug) / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
simple-line-icons.css, jquery.js

Interactive, Responsive Pie Chart

Author:
Ana Tudor | July 4, 2018
Made with:
HTML (Pug) / CSS (SCSS)

About a code

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

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Simple and Responsive Organizational Chart

Simple and Responsive Organizational Chart

Author:
Erin E. Sullivan | July 18, 2017
Made with:
HTML / CSS

About a code

HTML5 and CSS3 only simple and responsive organizational chart.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Bar Graph

Bar Graph

Author:
Champlow | July 13, 2017
Made with:
HTML / CSS (Less)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Charles Hayter's Colour Diagrams

Charles Hayter's Colour Diagrams

Author:
Chen Hui Jing | February 24, 2017
Made with:
HTML / CSS (SCSS)

About a code

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

Diagram

Author:
Nick Walsh | February 14, 2017
Made with:
HTML / CSS (Sass)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Interactive SVG & CSS Graph

Interactive SVG & CSS Graph

Author:
Explosion AI | November 6, 2016
Made with:
HTML (Pug) / CSS (Sass)

About a code

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

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Animated CSS Graph

Author:
Vanessa | July 13, 2016
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
chart.css

chart.css

Author:
Matheus Falcão | October 17, 2015
Made with:
HTML / CSS (SCSS)

About a code

A simple CSS chart system.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
chart.css
Pure CSS Bars

Pure CSS Bars

Author:
Rafael González | August 15, 2015
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
CSS Only 3D Bar Graph

CSS Only 3D Bar Graph

Author:
Tim Ruby | November 14, 2013
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Circle Chart With Three Bars

Circle Chart With Three Bars

Author:
Chris Coyier | June 11, 2012
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Wicked CSS3 3D Bar Chart

Wicked CSS3 3D Bar Chart

Author:
Marcofolio.net | May 24, 2010
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Discover Our Extensive Snippet Library

This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.

HTML Snippets.

Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.

CSS Snippets.

Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations

JavaScript Snippets.

Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms

Bootstrap Snippets.

Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components

Tailwind Snippets.

Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to

jQuery Snippets.

Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations

React Snippets.

Build robust, component-based user interfaces with our React snippets. From state management to lifecycle methods,

Vue Snippets.

Streamline Vue.js development with our collection of snippets for creating components, managing state, and handling events.

Ready to set your Brand ablaze?

Let's craft a visual identity that ignites passion and loyalty. ✨