Welcome to our collection of CSS Charts and Graphs! This meticulously curated compilation features a wide range of free HTML and CSS code examples for creating stunning charts and graphs. Sourced from reputable platforms like CodePen, GitHub, and other valuable resources, this collection offers a diverse selection of designs to visualize your data. With the July 2023 update, we are excited to introduce three new additions to our ever-expanding collection.
Explore our handpicked selection and enhance your data visualization projects with these innovative CSS charts and graphs!
Related Articles
Links
Made with
- HTML / CSS (SCSS)
About a code
Progress Donut Charts
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
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: -
Links
Made with
- HTML / CSS
About a code
Simple CSS Bar Chart
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
CSS-only Pie Charts
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
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: -
Links
Made with
- HTML / CSS
About a code
Pure CSS Area Chart
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Graph
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Slim) / CSS (SCSS)
About a code
Pure CSS Donut Charts
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
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: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
HTML Chart
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
This Pen is 19% HTML & 81% CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Purple Pie Chart
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
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: -
Links
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
Links
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: -
Links
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: -
Links
Made with
- HTML / CSS (Less)
About a code
Bar Graph
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
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: -
Links
Made with
- HTML / CSS (Sass)
About a code
Diagram
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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: -
Links
Made with
- HTML / CSS
About a code
Animated CSS Graph
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
About a code
chart.css
A simple CSS chart system.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: chart.css
Links
Made with
- HTML / CSS (SCSS)
About a code
Pure CSS Bars
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
CSS Only 3D Bar Graph
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Circle Chart With Three Bars
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
About a code
Wicked CSS3 3D Bar Chart
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -