There is something magical about the graphs. The curve curve instantly reveals the whole situation - the history of the epidemic, panic or prosperity. This line enlightens, arouses imagination, convinces.The amount of data you need to work with is constantly growing. And the more information, the more difficult it is to process it. That's why the topic of data visualization has become especially popular now - in the form of graphs, charts, dashboards, preferably interactive. The visual presentation of the data allows us, people, to spend less time and effort on viewing, analyzing and comprehending it, as well as on making the right, informed decisions based on this.
- Henry. D. Hubbard
Well, let's get started: here are the best JS libraries for data visualization!
- Many different types of graphs, including interactive maps and Gantt charts.
- The ability to analyze data “in depth” (drilldown) and other well-designed interactive options.
- The documentation describing all the necessary methods is well written, although for my taste, it’s not very convenient to use.
- Cool animation of graphs.
- Integration with React, Angular, Vue, Ember, etc.
- Ready-made plugin for WordPress.
- Export charts to an image or PDF file.
- Live graphics, full customization, special features in accordance with W3C standards.
- Full technical support for all users and priority for customers with a license.
- Clients: Microsoft, Amazon, Ebay, NASA, Samsung, Yandex, AT&T, etc.
Branding with reference in the free version. To remove branding, you need to buy a paid license (from $ 180), plus access to priority support is provided.
Learn more about amCharts
AnyChart is a well-developed, lightweight, multi-functional JS library for visualizing data with rendering in SVG / VML. Allows web developers to create all kinds of graphs and charts for further decision making based on them.
- Over 80 types of graphs, including conventional charts, stock charts, geovisualizations (maps), as well as Gantt charts and PERT network charts.
- There are many options for loading data: XML, JSON, CSV, JS API, Google Sheets, HTML tables.
- The ability to "delve" into the data on the chart (drilldown).
- Technical indicators for technical analysis and annotations (drawing tools) “out of the box”.
- Comprehensive documentation and description of the API, responsive support.
- Integration with Angular, Oracle APEX, React, Elasticsearch, Vue.js, Android, iOS, etc. For developers of applications and dashboards in Qlik there is a special ready-made extension for Qlik Sense.
- A lot of ready-made examples of graphs, charts, dashboards, as well as its own special sandbox with autocomplete code.
- Support for older browsers.
- Export data in various formats, including PDF reports; Jpg, png, svg image; Excel (XLSX) or CSV data files with graphs.
- Clients: Oracle, Microsoft, Citi, Samsung, Nokia, AT&T, Ford, Volkswagen, Lockheed Martin, etc.
The watermark version is free. To get rid of branding and get the opportunity to use AnyChart in commercial projects, you need to purchase a license (from $ 49).
Learn more about AnyChart
- 8 types of graphs and charts: linear (Line), linear with areas (Area), ruled (Bar), circular (Pie), petal "Radar" (Radar), polar (Polar), bubble (Bubble) and scatter plot ( Scatter).
- All types of graphs can be customized and provided with animation, and all of them are adaptive when working on the network.
- Functionality can be enhanced through the use of plugins.
- Good documentation.
- Support through Stack Overflow.
- Support for IE9 + browsers.
Free open source library. Published under the MIT license.
Learn more about Chart.js
Chartist.js is a simple open source JS library that can also be used to create neat adaptive graphs and charts. Generally speaking, it is well suited for those who need only elementary Line, Bar or Pie charts and do not need much in terms of data visualization. Nice appearance, and there is no need for a large number of all sorts of features.
- Only 3 types of charts: Line, Bar, Pie.
- Great animation.
- The API documentation contains all the necessary information, but it is not very convenient to use it (get ready to scroll a lot).
- Allows the use of plugins to extend functionality.
- It uses SVG to draw graphs.
- Support for older browsers.
Open-source, free use for any purpose.
Learn more about Chartist.js
- It takes time to master. Less clear and obvious than some of the commercial libraries on the list (e.g. AnyChart). Compensated by a huge number of tutorials and a really cool API.
- Combines powerful visualization components with a data-based approach to manipulating the DOM.
- Easily debug with a browser tool.
- A lot of examples.
- Curve Generation Functions.
- Drag-and-drop GUI.
D3 is an open-source library for creating graphs and charts, which is absolutely free for use for any purpose.
Learn more about D3.js
FusionCharts is another good library for building interactive graphs and charts, with hundreds of ready-made examples. FusionCharts charts support both JSON and XML data. Rendering - via HTML5 / SVG and VML.
- Dozens of chart types, 2D and 3D, and over 950 maps covering all continents.
- Animated and fully interactive graphics and maps.
- Server API for ASP.NET, PHP, Ruby on Rails.
- Compatible with jQuery, Angular, PHP, ASP.NET, React Native, Django, React, Ruby on Rails, Java, etc.
- A fairly detailed user guide and description of the API.
- Many examples of charts and dashboards.
- Support for older browsers.
- Export to PNG, JPG and PDF.
- Support - through the knowledge base and community forum.
- Unlimited priority support for users who purchase a license.
- Clients: Apple, IBM, Google, Intel, Microsoft, PayPal, Oracle, Adobe, etc.
Free for non-commercial use. Paid licenses for commercial use (from $ 497).
Learn more about FusionCharts
Google Charts is an excellent choice for those projects in which simplicity and stability of charts are preferable to complex, detailed customization settings.
- Graphics rendering in HTML5 / SVG and VML.
- Many examples of graphs, charts, dashboards.
- All graphs are interactive, some can also be zoom and pan.
- Full documentation.
- Support for older browsers.
- Support via FAQ, GitHub and forum.
Free license, but source code is not open. It does not allow you to host Google JS files on your server, so it may not be suitable for you if you work with sensitive data.
Learn more about Google Charts
- Worthy documentation and description API documentation, user cases.
- Interactivity, including drilldown (the ability to analyze data "in depth").
- Can be used with React, Angular, Meteor, .NET, iOS, etc.
- Export to PNG, JPG, PDF and SVG formats.
- Support for users of the free version through the forum and Stack Overflow. Premium email and Skype support is only available to commercial users who own the appropriate license.
- Clients: Visa, Yahoo !, Facebook, Twitter, Groupon, Nokia, Ericsson, Mastercard, Yandex, etc.
Free for non-commercial use. For commercial use, you must purchase a license (from $ 50).
Learn more about Highcharts
- 20 types of graphs and charts that can be embedded on the site or used to create dynamic presentations.
- It is used as a browser-based charting library for Python, R, MATLAB, abstracting graphs into a declarative JSON structure.
- Extensive API documentation.
- Nice animation.
- Uses React.
- Export charts to PNG and JPG. Export to EPS, SVG and PDF is available by subscription.
- Many ready-made examples.
- It can work with Excel spreadsheets or directly with your database.
- Support Forum.
Free open source library.
Learn more about Plotly.js
ZingChart is a useful tool for creating interactive and adaptive charts. This is a fast and flexible library that makes it quite easy to work with big data and generate graphs with large amounts of data.
- Supports over 30 types of graphs and charts.
- Fully customizable, with design settings a la CSS.
- Compatible with jQuery, Angular, Node.js, PHP, etc.
- Work with data in real time, fast rendering of data sets of any size.
- Data can be loaded via JS objects, JSON, CSV, PHP, AJAX, MySQL.
- Detailed and fairly readable API documentation.
- Free and premium support through the ZingChart help center, Stack Overflow, email and chat.
- Clients: Microsoft, Boeing, Adobe, Apple, Cisco, Google, Alcatel, etc.
The branded license provides full access to the ZingChart library for free. For commercial use, a paid license is required (from $ 199).
Learn more about ZingChart
Of course, there are some features, features that make one library faster, or prettier in terms of design, or more flexible than others. But, in the end, it is not so important which libraries are on the list, because in the end the best is the one that most fully meets your specific requirements as part of a single task.
My advice is to get to know all of these leading libraries at least a little closer: when you need JS charts to visualize data in a particular project, it is very likely that one or more of them will suit you best. If you want to deal with the list more authentically, pay attention to the comparison on Wikipedia .