Collection of free jQuery chart and graph code examples and plugins from Codepen and Github. Update of December 2020 collection. 1 new item.

Related Articles

  1. CSS Charts And Graphs
  2. Tailwind Charts And Graphs
Demo image: donutgraph.js


  • JP Weiner

Made with

  • HTML / CSS / JS

About a code


Animated donut graph jQuery plugin with D3js.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: donutgraph.js, d3.js


  • Ziropixel

Made with

  • HTML / CSS / JS

About a code

Pie Chart

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -


  • Ancoor

Made with

  • HTML / CSS / JS

About a code

Donut in 2D : Chart Gallery

A variation of the pie chart, the doughnut 2D chart has a blank space at the center to show useful information about the data being plotted.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: fusioncharts.js, fusioncharts.theme.fusion.js, fusioncharts.jqueryplugin.js

Demo image: Flot
Made by
  • flot
Github activity
  • 5503 stars
  • 330 watchers
About the plugin


Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.

Demo image: Peity
Made by
  • Ben Pickles
Github activity
  • 3944 stars
  • 138 watchers
About the plugin


Peity (sounds like deity) is a jQuery plugin that converts an element's content into a mini svg pie, donut, line or bar chart.

Demo image: Cytoscape.js
Made by
  • Cytoscope
Github activity
  • 3801 stars
  • 200 watchers
About the plugin


Cytoscape.js is a fully featured graph theory library. Do you need to model and/or visualise relational data, like biological data or social networks? If so, Cytoscape.js is just what you need.
Cytoscape.js contains a graph theory model and an optional renderer to display interactive graphs. This library was designed to make it as easy as possible for programmers and scientists to use graph theory in their apps, whether it's for server-side analysis in a Node.js app or for a rich user interface.

Demo image: Arbor
Made by
  • Christian Swinehart
Github activity
  • 2464 stars
  • 169 watchers
About the plugin


Arbor is a graph visualization library built with web workers and jQuery. Rather than trying to be an all-encompassing framework, arbor provides an efficient, force-directed layout algorithm plus abstractions for graph organization and screen refresh handling.
It leaves the actual screen-drawing to you. This means you can use it with canvas, SVG, or even positioned HTML elements; whatever display approach is appropriate for your project and your performance needs.
As a result, the code you write with it can be focused on the things that make your project unique – the graph data and your visual style – rather than spending time on the physics math that makes the layouts possible.

Demo image: jQuery Sparklines
Made by
  • Gareth Watts
Github activity
  • 1105 stars
  • 65 watchers
About the plugin

jQuery Sparklines

This jQuery plugin makes it easy to generate a number of different types of sparklines directly in the browser, using online a line of two of HTML and Javascript.

Demo image: OrgChart
Made by
  • Xuebin Dong
Github activity
  • 935 stars
  • 97 watchers
About the plugin


It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.

  • Supports both local data and remote data (JSON)
  • Smooth expand/collapse effects based on CSS3 transitions
  • Align the chart in 4 orientations
  • Allows user to change orgchart structure by drag/drop nodes
  • Allows user to edit orgchart dynamically and save the final hierarchy as a JSON object
  • Supports exporting chart as a picture or pdf document
  • Supports pan and zoom
  • Users can adopt multiple solutions to build up a huge organization chart(please refer to multiple-layers or hybrid layout sections)
  • Touch-enabled plugin for mobile divice
Demo image: jOrgChart
Made by
  • Wes
Github activity
  • 867 stars
  • 106 watchers
About the plugin


jQuery OrgChart is a plugin that allows you to render structures with nested elements in a easy-to-read tree structure. To build the tree all you need is to make a single line call to the plugin and supply the HTML element Id for a nested unordered list element that is representative of the data you'd like to display. If drag-and-drop is enabled you'll be able to reorder the tree which will also change the underlying list structure.

  • Very easy to use given a nested unordered list element
  • Drag-and-drop functionality allows reordering of the tree and underlying ul structure
  • Showing/hiding a particular branch of the tree by clicking on the respective node
  • Nodes can contain any amount of HTML except li and ul
  • Easy to style
  • You can specify that sub-trees should start collapsed, which is useful for very large trees
Demo image: jQuery Plugin Circliful
Made by
  • Patric Gutersohn
Github activity
  • 827 stars
  • 52 watchers
About the plugin

jQuery Plugin Circliful

jQuery circle statistic plugin.

  • show infos as circle statistics, no images used
  • based on SVG and jquery
  • many options can be set
  • fully responsive
Demo image: jQuery.ganttView
Made by
  • JC Grubbs
Github activity
  • 640 stars
  • 57 watchers
About the plugin


The jQuery.ganttView plugin is a very lightweight plugin for creating a Gantt chart in plain vector graphics or images required. The plugin supports dragging and resizing the Gantt blocks and callbacks to trap the updated data.

Demo image: Pizza Pie Charts
Made by
  • Zurb
Github activity
  • 424 stars
  • 54 watchers
About the plugin

Pizza Pie Charts

Pizza is a responsive pie, donut, bar, and line graph charting library based on the Snap SVG framework from Adobe. It focuses on easy integration via HTML markup and CSS instead of JavaScript objects, although you can pass JavaScript objects to Pizza as well.

Demo image: jQuery Visualize
Made by
  • filamentgroup
Github activity
  • 349 stars
  • 53 watchers
About the plugin

jQuery Visualize

HTML5 canvas charts driven by HTML table elements.

Demo image: HighChartTable
Made by
  • Adrien Gallou, Benoît Lévêque
Github activity
  • 250 stars
  • 47 watchers
About the plugin


jQuery plugin to convert HTML tables to HighCharts graphs.

Demo image: jQuery.Flowchart
Made by
  • Sébastien Drouyer
Github activity
  • 195 stars
  • 29 watchers
About the plugin


jquery.flowchart.js is an open source javascript jQuery ui plugin that allows you to draw and edit a flow chart.

  • Draw boxes (called operators) and connections between them
  • Methods are provided so that the end-user can edit the flow chart by adding/moving/removing operators, creating/removing connections between them
  • The developper can save/load the flowchart.
  • Operators and links can be customized using CSS and the plugin parameters
  • Some methods allow you to add advanced functionalities, such as a panzoom view or adding operators using drag and drop
Demo image: jQuery.Graphviz.SVG
Made by
  • @Lord_Coops
Github activity
  • 89 stars
  • 9 watchers
About the plugin


jQuery plugin to make Graphviz SVG output more interactive and easier to navigate.

  • Highlight nodes/edges
  • Zoom in/out
  • Graph navigation - select linked nodes
  • Fancy UI tooltips; bootstrap supported out the box
  • Move things forward/back in the graph
Demo image: Chartinator
Made by
  • jbowyers
Github activity
  • 47 stars
  • 7 watchers
About the plugin


A jQuery plugin for transforming HTML tables into charts using Google Charts.

  • Creation of all chart types using Google Charts - Visit
  • Extraction of data from HTML tables, Google spreadsheets, and JavaScript arrays
  • Accessible data - Using HTML tables as data sources makes data accessible to screen readers and searchbots
  • Generation of HTML tables from other data sources - Makes data extracted from JS arrays and Google Sheets accessible
  • Showing and hiding of HTML tables accessibly
  • Manipulation of data extracted from HTML tables and Google Sheets using JavaScript arrays
  • Transposition of data - swapping of rows and columns
  • Resizing of charts on screen resize - Responsive Web Design
  • Chart aspect ratio control
  • Art direction - Zoom and offset of chart - Useful for refining the region displayed in geoCharts
  • Customization of chart tooltips and annotations
  • Customization of all Google Chart options - Fonts, colors, chart formatting, etc.
  • Adding Google Chart event handlers - Event handlers can be defined in the options
Demo image: ZingChart jQuery
Made by
  • zingchart
Github activity
  • 42 stars
  • 12 watchers
About the plugin

ZingChart jQuery

Easy ZingChart manipulation and interactivity for jQuery users. 35+ chart types & modules.

Demo image: Ivis
Made by
  • Zhigang Lu
Github activity
  • 4 stars
  • 1 watchers
About the plugin


IVIS is a chart editor for interactive visualisation, based on jQuery and HighCharts. Chart types include dot/scatter, 2D scatter, line, bar/column, pie, and heat map. It's powerful when analysing large data sets.

Demo image: IguanaChart
Made by
  • IguanaChart
Github activity
  • 3 stars
  • 1 watchers
About the plugin


IguanaCharts is HTML5 jQuery stock charts library.

  • Zoom and load chart history with mouse wheel
  • Draw on chart trend lines, fibonacci, corners and plenty other figures
  • Use technical analysis indicators
  • Show trades on chart and trade from the chart
  • Set browser width or full screen modes (when supported by the browser)
  • Change themes, languages and cultures on the fly
  • Decide where to store information, or from where to load specific information used
  • Change the complete layout of the chart, if necessary by adjusting themes and CSS classes
  • Add/Remove/Detect changes for studies/drawings
Demo image: cssCharts.js


Sultan Tarimo github page

jQuery plugin to create simple donut, bar or line charts with dom nodes. Style with CSS.

Demo image: SimpleFlowchart


M.Mazo github page

This is a small JavaScript library with single purpose - draw some nodes and connect them with lines. You can use this library to create your own flow charts or create other similar graphics. Nodes and connection lines can be styled with CSS. Node content can be whatever you want - simple div, image or svg. The library is depends on jQuery and jQuery UI (drag and drop and effects).

Demo image: jQuery.Feyn


Zan Pan github page demo

jQuery.Feyn is a jQuery plugin to facilitate your drawing Feynman diagrams with Scalable Vector Graphics (SVG).

Demo image: jQuery Spidergraph Plugin

jQuery Spidergraph Plugin

Jason Striegel github page demo

jQuery.spidergraph is a simple module that creates nice looking, interactive spidergraphs in HTML5, using the canvas element.