CSS Graph Box is a CSS-based graph component with distinctive and clean style. You can use CSS Graph Box as conventional graph or a progress bar.
HTML Graphs with Horizontal Bar Chart
This was the attempt of my hack day to try to make a meaningful graphical representation using only HTML elements. The horizontal bar chart works very accurately, but the bubble table is not due to the central position of the square (with radius of border) not in the center. From this learning, I developed a model system based on SVG, much easier to use.
Responsive SVG graph
The graph line and (after a short delay) labels and tick marks remain undistorted as the graph resizes with the window. Lovely. (Though my iffy formatting means the labels may be cropped if the window’s tiny, as here on CodePen. Oops.)
Animated Stats and graph
CSS3 Animated Graph
Pure HTML and CSS3 line graph. Hovering a section highlights it with a caption. Populated and updated on an interval with AngularJS. A rotation transform is manually applied to connect the dots, and a simple CSS3 transition provides the animation.
Dynamic Line Graph w/ Raphael.js
It is a sample flexible, dynamic line graph that used a custom data object and Rahael.js to bring this about. There are solutions out there link hightcharts, but they are fairly cumbersome, don’t offer a good way to fully customize the design and are filled with features you don’t need.
Early concept graph for an admin dashboard. Toggles between team overview and the individual user’s data. Values are calculated based on the data, and markers are adjusted accordingly.
Simple AngularJS Graph
It always struck me that Angular could be used as a nice simple tool for visualising data. The ability to use Angular data values in inline style would allow for bar charts, graphs or pie charts to be created quite simply.
Animated Data Bar Chart & Graph
An interactive bar graph packed with animations and information. Built with CSS and jQuery.
A d3 line graph with additional “horizontal padding” to the chart area.
Bar Chart with JS
CSS 3D Animated Chart
3D prisms created purely with HTML and CSS3(D) transforms, shaded with CSS gradients, animated with CSS transitions. AngularJS is used to wire up an updating dataset.
CSS3 Pie Chart
Circle Bar Chart
Animated circle bar chart created with D3.
Ishtar Interactive Line Chart
SVG Doughnut chart with animation and tooltip
Radar Chart jQuery Plugin
D3 Line Chart Plotting Shot Attempts
D3 line chart plotting shot attempts for an NHL hockey game. Different point styling for goals vs. shots, tooltip on hover & additional details show on click. Optional strength chart toggle which underlays 5v4, 4v5 and 5v5 events during the game.
Animated bar chart
Simple animated bar chart. This could be made purely in CSS once there is support for using attr() with the “height” property. This is proposed and should work in the future, though
Dynamically generated 3D bar chart
SVG Pie chart with tooltip and mouse effects
Canvas pie chart with CSS bar chart fallback
Bullet Chart Example
Multiple Chart Example
Animated chart with jQuery
Animated bar chart from existing HTML table
Playing with Mustache and Google Chart
CSS Vertical Chart
Adjustable Pie Chart
Make Google Charts Responsive
How to make Google charts play nicely in responsive mode (as in auto adjusting to window width). By default Google charts display nicely upon reload, but not when resizing the window.
Basic Range Chart Example
Basic Dotplot Example
Grouped Bar Example
CSS3 Line With Data Labels Example
Dotplot With Range Example
Scatterplot With Annotations Example
Basic Boxplot Example
Multiple Line Example
Playing with Google Charts
My attempt at making Google Charts look better. If anyone figures out an easy way to style them with CSS, let me know.
Line Chart with Chart.js
Customisable Animated Donut Chart
JS Pie Chart V2
Responsive CSS Bar Graph
Triple Doughtnut Chart
d3 bounded-zoom line chart example
3D Animation Chart Bar
Dash Board Chart
Animated Dashboard Widget
Cloud storage ui
HTML 5 Canvas Polar Clock
Country Bar Chart 3D
D3.js bar chart with transitions
jQuery Donut Chart Widget
Html CSS Graphs
Animated 3D Bar charts
This animated and 3D bar charts are created using pure css and a few animations
Create an Interactive Graph using CSS3 & jQuery
Infographic Charts and Graphics HTML Tags Library
This custom JS charting library created by PSDDude from 0 implements custom HTML tags which allow creating charts and graphs for infographics.
jQuery Responsive Google Charts Plugin
You can easily set up nice, SVG, responsive charts on your websites by setting a few HTML data- properties. Here’s all the HTML you need to set up one of six charts.