30 Pure CSS Charts Animation

Collection of free HTML and CSS Charts Animation examples from Codepen and other resources.

Table of Contents

• Morris Charts
• Charts info graphic
• Make Google Charts Responsive
• SVG Animated Circles
• Charts Pure CSS
• SVG Doughnut chart Animation
• jQuery Donut Chart Widget
• Google Charts
• CSS 3D Animated Chart
• Responsive Pie Charts
• Pure CSS Bars
• Apex Chart
• CSS Donut Charts
• SVG Pie Chart tooltip
• Horizontal Bar Chart
• 3D step counter card
• Canvas pie chart
• Easy Pie Chart
• SVG percentage circle
• chart JS
• Donut Chart
• Dashboard Demo
• Adjustable Pie Chart
• Animated Stats and graph
• Radar Chart jQuery Plugin
• Pie Chart
• Responsive
• Circle Chart
• Donut Chart Animation
• Dynamically bar chart

Morris Charts

See the Pen Morris.js charts - simple examples by Cioban Andrei (@andreic) on CodePen.

Charts graphic

See the Pen Charts info graphic by Stefan Judis (@stefanjudis) on CodePen.

Google Charts Responsive

See the Pen Make Google Charts Responsive by flo preynat (@flopreynat) on CodePen.

SVG Animated Circles

See the Pen CSS/SVG Animated Circles by Kyle Edwards (@kyledws) on CodePen.

Charts Pure CSS

See the Pen Charts pure Css by Kseso (@Kseso) on CodePen.

SVG Doughnut Chart

See the Pen SVG Doughnut chart with animation and tooltip by Hiro (@githiro) on CodePen.

jQuery Donut Chart Widget

See the Pen jQuery Donut Chart Widget by Drew Worthey (@drewworthey) on CodePen.

Google Charts

See the Pen Playing with Google Charts by Eric Sadowski (@ejsado) on CodePen.

CSS 3D Animated Chart

See the Pen CSS 3D Animated Chart by Evan Q Jones (@ejones) on CodePen.

Responsive Pie Charts

See the Pen Responsive and Animated Pie Charts by Maciej Caputa (@MaciejCaputa) on CodePen.

Pure CSS Bars

See the Pen Pure CSS Bars by Rafael González (@rgg) on CodePen.

Apex Chart

See the Pen Creating your first ApexChart by ApexCharts (@apexcharts) on CodePen.

CSS Donut Charts

See the Pen CSS Donut Charts by Sean Stopnik (@seanstopnik) on CodePen.

SVG Pie Chart effects

See the Pen SVG Pie chart with tooltip and hover effects by Hiro (@githiro) on CodePen.

Horizontal bar Chart

See the Pen Pure CSS horizontal bar chart with staggering animation by Kriszta (@vajkri) on CodePen.

3D step Counter card

See the Pen 3D step counter card 🚶 by Steve Gardner (@ste-vg) on CodePen.

Canvas pie chart

See the Pen Canvas pie chart with CSS bar chart fallback by Ludvig Lindblom (@ludviglindblom) on CodePen.

Easy pie chart

See the Pen Easy pie chart admin panel by Robert (@rendro) on CodePen.

SVG percentage circle

See the Pen SVG percentage circle with css keyframes animation - complete example by Sergio Pedercini (@sergiopedercini) on CodePen.

chart JS

See the Pen chart.js sample by Albert Ventura (@venturads) on CodePen.

Donut Chart

See the Pen Donut Chart by Kris Ellery (@kris-ellery) on CodePen.

Dashboard Chart

See the Pen Dashboard Demo by Miles Manners (@milesmanners) on CodePen.

Adjustable Pie Chart

See the Pen Adjustable Pie Chart by Eric Sadowski (@ejsado) on CodePen.

Animated Stats and graph

See the Pen Animated Stats and graph by Deep (@deep1808) on CodePen.

Radar Chart jQuery Plugin

See the Pen Radar Chart jQuery Plugin by Ryan Allred (@Synvox) on CodePen.

Pie Chart

See the Pen Pie Chart by Jon Graft (@JonGraft) on CodePen.

Responsive

See the Pen Responsive by ApexCharts (@apexcharts) on CodePen.

SVG Circle Chart

See the Pen CSS only animated SVG Circle Chart by Markus Oberlehner (@maoberlehner) on CodePen.

Donut Chart Animation

See the Pen Donut Chart Dial SVG Animation by Ettrics (@ettrics) on CodePen.

Dynamically Bar chart

See the Pen Dynamically generated css animated bar chart by Thomas Eschemann (@tomesch) on CodePen.