JavaScript Libraries for Creating Circular Charts

These libraries don’t use images to represent images; instead they use HTML 5 canvas to create circular form of graph.

1. Cake Chart

cakechart-2
Cake Chart is a javascript library to create interactive multi-layer pie charts. CakeChart is a quite dumb component that renders provided tree, but doesn’t navigate through it, so you have to implement that part yourself. Which is not hard though.

2. Morris.js

morrisjs-1
Morris.js is the library that powers the time-series graphs. It’s a very simple API for drawing line, bar, area and donut charts.

3. gRaphael

gRaphaël—Charting-JavaScript-Library
gRaphaël’s goal is to help you create stunning charts on your website. It is based on Raphaël graphics library. gRaphaël currently supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.

4. jqPlot

jqplot
jqPlot is a plotting and charting plugin for the jQuery Javascript framework. jqPlot produces beautiful line, bar and pie charts with many features such as numerous chart style options, rotate axis text, tooltip and data point highlighting, up to 9 Y axes and many more.

5. ECharts

echart
ECharts is a comprehensive charting library offering a painless way of adding interactive charts to your products. ECharts currently supports line, column, scatter, pie, radar, candlestick, chord, gauge, funnel, map and force-directed chart types, many of these can be combined in one chart.

6. Circle

circle
Circle is a Small JavaScript library that generates circular graphs.

7. JSGraphics.js

jsgraphicsjs
This JavaScript VectorGraphics library provides graphics capabilities for JavaScript: functions to draw circles, ellipses (ovals), oblique lines, polylines and polygons (for instance triangles, rectangles) dynamically into a webpage. Usage of this Vector Graphics library should be easy even if you don’t have JavaScript experience.

8. CircleDonutChart

circledonutchart
This library takes your parameters and displays a circle donut (in flat style). The displaying is performed by writing an SVG graphic into a provided DIV element. Changing values of the circle leads to a smooth animation that can also be triggered if the scrolling position is fully showing the circle.

9. Circles

circles
Circles is a lightweight JavaScript library without dependencies, that generates the SVG chart on the fly.

10. jQuery Kontrol

jquery-kontrol
jQuery Kontrol is a experimental JavaScript jQuery library of UI controls ; dial (was jQuery Knob), XY pad, bars. It is canvas based so no png or jpg sprites. It also have touch, mousewheel, keyboard events implementation.

11. Chart.js

chartjs-1
Chart.js is an easy, object oriented client side graphs for designers and developers. You can visualise your data in 6 different ways. Each of them animated, fully customizable and look great, even on retina displays. Chart.js uses the HTML5 canvas element. It supports all modern browsers, and polyfills provide support for IE7/8.

12. Circliful

circlifull-1
Circliful is a jQuery plugin for showing circle statistics; It is based on HTML 5 and jQuery so no images are used.

User experience designer, web developer, code addict, video editor, Tv graphic