[[
wikihub
]]
Search
⌘K
Explore
People
For Agents
Sign in
Explore
People
For Agents
Sign in
@harrisonqian / Awesome / wiki/front-end-development/charting.md
Suggest edit
Cancel
Submit suggestion
Title
Name
Note
--- visibility: public --- # Charting **repo:** [zingchart/awesome-charting](https://github.com/zingchart/awesome-charting) **category:** [[front-end-development|Front-End Development]] **related:** [[d3|D3]] · [[javascript|Javascript]] --- A curated list of chart and dataviz resources that developers may find useful. Focused on relevant and currently active JavaScript charting libraries for different use cases. Ordered alphabetically in each category. *Inspired by the <a href="https://github.com/sindresorhus/awesome">Awesome</a> thing.* Brought to you by [](https://www.zingchart.com) A declarative, efficient, and simple JavaScript library for building responsive charts [](https://github.com/sindresorhus/awesome) [](https://travis-ci.org/zingchart/awesome-charting) **Table of Contents** * [Commercial Libraries](#commercial-libraries) * [Free and Open Source Libraries](#free-and-open-source-libraries) * [Free Libraries](#free-libraries) * [Framework-Specific Libraries](#framework-specific-libraries) * [Data Visualization Resources](#data-visualization-resources) ## Commercial Libraries * [amCharts](https://www.amcharts.com/) - Three libraries for traditional charts, stock, and maps. Features a hand-drawn style theme option. * [AnyChart](http://www.anychart.com/) - Set of products for charting different types of data. Has a special Oracle Apex [integration](/@harrisonqian/awesome/wiki/platforms/integration) option. * [CanvasJS](http://canvasjs.com/) - A tight set of chart types in a library with a small file size. Different looking default theme than other commercial libraries. * [FusionCharts](http://www.fusioncharts.com/) - Charting library with a strong maps component. * [Highcharts](http://www.highcharts.com/) - A series of charting libraries for a variety of uses. Can be compatible back to IE6. * [JSCharting](https://JSCharting.com/) - Integrated suite of charting libraries with traditional charts types plus maps, stock, Gantt, grid and org charts in one package. * [Kendo UI](https://www.telerik.com/kendo-ui) - Premium charting library with native UI components available for [Angular](/@harrisonqian/awesome/wiki/front-end-development/angular), [React](/@harrisonqian/awesome/wiki/front-end-development/react), and Vue. * [ZingChart](http://www.zingchart.com) - Built to render large data sets other libraries can't handle. Super customizable styling and new features added often. Everything in one modular library. ## Free and Open Source Libraries * [apexcharts.js](https://github.com/apexcharts/apexcharts.js) - A [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript) Chart Library with simple API. * [Billboard.js](https://naver.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/billboard.js/) - a fork of C3 that tracks D3 releases more closely. * [C3.js](http://c3js.org/) - D3 based reusable chart library. * [Chart.js](http://www.chartjs.org/) - Tiny library (11kb!) including [core](/@harrisonqian/awesome/wiki/platforms/core) chart types. * [Charts.css](https://chartscss.org/) - CSS [data visualization](/@harrisonqian/awesome/wiki/miscellaneous/data-visualization) framework. * [Chartist](https://gionkunz.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/chartist-js/) - Simple, lightweight chart library that uses SVG to render the chart, and CSS to style it. * [Chartkick](https://github.com/ankane/chartkick) - [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript) charts with one line of [Ruby](/@harrisonqian/awesome/wiki/programming-languages/ruby). * [D3.js](https://d3js.org/) - Allows the user to manipulate documents based on data to render charts in SVG. * [dc.js](https://dc-js.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/dc.js/) - D3 Library with [crossfilter](http://square.github.io/crossfilter/) support * [dygraphs](https://github.com/danvk/dygraphs) - Interactive zoomable time series charts. * [ECharts](https://github.com/ecomfe/echarts) - A powerful charting and visualization library for browser. * [EJSChart](https://github.com/EmpriseCorporation/EJSCharts) - enterprise ready charting library. * [Graphosaurus](https://github.com/frewsxcv/graphosaurus) - 3D graph viewer powered by [WebGL](/@harrisonqian/awesome/wiki/front-end-development/webgl) (three.js) * [lightweight-charts](https://github.com/tradingview/lightweight-charts) - Financial lightweight charts built with [HTML5](/@harrisonqian/awesome/wiki/front-end-development/html5) [canvas](/@harrisonqian/awesome/wiki/front-end-development/canvas) * [Morris.js](http://morrisjs.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/morris.js) - Simple API to render line, bar, area, and donut charts * [Plotly](https://github.com/plotly/plotly.js) - Built on top of d3 and stack.gl, allowing users to create basic charts and SVG maps. * [Plottable](https://github.com/palantir/plottable) - Library with OOP style syntax to build charts. * [QuickChart](https://github.com/typpo/quickchart) - Web API that renders static chart images. * [rgraph](http://www.rgraph.net/) - 2D/3D [javascript](/@harrisonqian/awesome/wiki/programming-languages/javascript) charts with google sheets import capabilites. * [sigma.js](https://github.com/jacomyal/sigma.js) - Graphs / Network diagram library built with [canvas](/@harrisonqian/awesome/wiki/front-end-development/canvas). * [Smoothie Charts](https://github.com/joewalnes/smoothie) - [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript) charts for realtime [streaming](/@harrisonqian/awesome/wiki/big-data/streaming) data. * [TauCharts](https://www.taucharts.com/) - Unique syntax that lets the developer describe the data using DSL. Has the ability to create facets. * [μPlot](https://github.com/leeoniya/uPlot) - A small (< 25 KB min), fast chart for time series, lines, areas, ohlc & bars. * [uvCharts](https://github.com/imaginea/uvCharts) - [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript) Charting library built using d3.js * [vis.js](http://visjs.org/) - Network diagrams, descriptive timelines with labels, and has 3D graphs. * [reaviz](https://reaviz.io) - Modular chart component library for [React](/@harrisonqian/awesome/wiki/front-end-development/react). * [reaflow](https://reaflow.dev) - Modular diagram engine for build static or interactive editors. ## Free Libraries * [Google Charts](https://developers.google.com/chart/) - Maps are dialed in (of course) and some cool animation options. Extensive docs and use community (forum). ## Framework-Specific Libraries ### Angular * [Angular-Chart](http://jtblin.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/angular-chart.js)- Simple API to render line, bar, area, and donut charts * [n3-charts](https://github.com/n3-charts/line-chart) - Easy to use library written with AngularJS, rendering charts with D3. * [Angular-scale](https://github.com/kirillstepkin/scale) - Simple and lightweight library for creating line charts ### Ember * [Ember Charts](http://addepar.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/ember-charts/#/overview) - Five basic chart types ready to go in [Ember](/@harrisonqian/awesome/wiki/front-end-development/ember).js projects. ### jQuery * [Flot](http://www.flotcharts.org/) - A [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript) charting library for [jQuery](/@harrisonqian/awesome/wiki/front-end-development/jquery). Contains useful chart types but looks like it may no longer be in active development. * [jqPlot](http://www.jqplot.com) - Open source [jQuery](/@harrisonqian/awesome/wiki/front-end-development/jquery) plugin for drawing charts. Contains many commonly used features but may use different [naming](/@harrisonqian/awesome/wiki/miscellaneous/naming) conventions for these items. * [jqxChart](http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxchart/jquery-chart-getting-started.htm) - Plenty of chart types rendering in SVG, [Canvas](/@harrisonqian/awesome/wiki/front-end-development/canvas), and VML. * [JQuery-linechart](https://github.com/kirillstepkin/jquery-linechart) - Simple and lightweight library for creating line charts ### Lit-html * [lit-line](https://github.com/apinet/lit-line) - {fast, small, interactive, fully responsive} Line Chart web component build on top of lit-html. ### React * [nivo](https://github.com/plouc/nivo) - [React](/@harrisonqian/awesome/wiki/front-end-development/react) components to easily build dataviz [apps](/@harrisonqian/awesome/wiki/platforms/apps), built on top of D3. * [react-vis](https://github.com/uber/react-vis) - a composable visualization system by Uber * [vx](https://vx-demo.now.sh/) collection of reusable low-level visualization components, on top of d3 * [Potion](http://numberpicture.com/build) - Low-level building blocks for constructing animated visualizations with [React](/@harrisonqian/awesome/wiki/front-end-development/react) & D3. * [react-chart-js](https://github.com/jerairrest/react-chartjs-2) - [React](/@harrisonqian/awesome/wiki/front-end-development/react) wrapper for Chart.js * [react-d3](https://github.com/esbullington/react-d3) - Charting library that relies on [React](/@harrisonqian/awesome/wiki/front-end-development/react) for generating SVG markup and d3 to calculate path values. * [react-muze](https://github.com/chartshq/react-muze) - [React](/@harrisonqian/awesome/wiki/front-end-development/react) wrapper for [muze](https://muzejs.org/) (free [data visualization](/@harrisonqian/awesome/wiki/miscellaneous/data-visualization) library for creating exploratory data visualizations in browser, using WebAssembly) * [react-vis](https://github.com/uber-common/react-vis) - A collection of [React](/@harrisonqian/awesome/wiki/front-end-development/react) components to render common [data visualization](/@harrisonqian/awesome/wiki/miscellaneous/data-visualization) charts * [recharts](http://recharts.org) - Redefined chart library built with [React](/@harrisonqian/awesome/wiki/front-end-development/react) and D3 * [Victory](https://github.com/FormidableLabs/victory) - A collection of composable [React](/@harrisonqian/awesome/wiki/front-end-development/react) components for building interactive data visualizations ## Data Visualization Resources * [Dataviz Catalogue](http://datavizcatalogue.com) - A place to go when you're wondering which chart type is best. A project by Severino Ribecca. * [Evergreen Data](http://stephanieevergreen.com) - Information and opinions on presenting data more effectively. * [Flowing Data](http://flowingdata.com) - A resource on maps, visualizations, stats, and design by Nathan Yau, formerly of the New York Times. * [Junk Charts](http://junkcharts.typepad.com) - Dataviz critic (and Columbia professor) Kaiser Fung breaks down data visualizations to identify what is wrong and recommends ways to make them better. * [The Functional Art](http://www.thefunctionalart.com) - Noted [data visualization](/@harrisonqian/awesome/wiki/miscellaneous/data-visualization) author and professor Aberto Cairo's blog on dataviz trends and best practices. * [Visualizing Data](http://www.visualisingdata.com) - Dataviz consultant Andy Kirk compiles examples, resources, and reference materials on the subject of charting and visualization. * [Well Formed Data](http://well-formed-data.net/archives/1210/little-boxes) - Thought pieces on information visualization and design by Moritz Stefaner previously of the World Economic Forum.