Shulou(Shulou.com)06/02 Report--

This article introduces the knowledge about "what JavaScript data visualization library has". In the actual case operation process, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!

JavaScript Data Visualization Library

We selected 14 JavaScript libraries for data visualization (which are currently the most popular or interesting) and did some research to see which one works best for our project. There are many factors to consider here:

What kind of chart do I want? pie chart, geographic chart, line chart, bar chart?

Some libraries support only a few types. First, you need to know what you need.

How big is the dataset?

SVG-based libraries are generally better suited for small and medium-sized datasets because each element is a unique node and exists in the DOM tree. This also means that they allow direct access, allowing for more flexibility. While you can make them capable of handling large datasets with some data aggregation algorithms, intelligent memory management, and other fancy tricks, using Canvas-based large dataset tools is a more reliable option. Canvas is very fast.

Is the app for web, mobile, or both?

Some libraries are better at responsiveness, while others have their own versions of React Native, such as Victory.

Does the browser support the given library?

What JavaScript framework do you use?

Make sure your database is running smoothly. If you're using React, it's probably better to use React-specific libraries than wrappers.

What look do you need?

If you need some advanced animation, you should also consider this.

In some cases, you may not need a data visualization library at all. Sometimes it's a good idea to write from scratch in native JavaScript. While it can be costly to start with (especially if you're doing it for the first time), projects with custom charts may pay off in the future. Sometimes it's better to stay sensible and spend more resources on the development part rather than trying to engineer the library to suit your specific needs. While it sounds scary at first, the SVG-oriented mindset and hours of experimentation--who knows, it could be fun!

If you're familiar with modern front-end frameworks, Vue.js is particularly good at this, and it works with SVG effortlessly. Note that I'm talking strictly about SVG-based diagrams because it's easier to implement. HTML5 Canvas is just the drawing surface of a bitmap, and it doesn't know what the objects drawn inside are-they're pixels, not DOM elements like SVG. If you want it to be interactive, you need to handle all the logic yourself. While the Canvas-based approach offers the performance advantages and rigor of large datasets (1000 + elements), I wouldn't recommend writing from scratch-unless it's a core feature of your product.

So under what circumstances can I use the library?

When your project has a weird chart, something that requires a nice interface with basic functionality, something with all the bells and whistles (tooltips, legends, X/Y axes, etc.), or when the application needs standardized, responsive, and detailed charts, especially when there are multiple types.

Finally, we use libraries to avoid reinventing the wheel over and over again, and most libraries have been around for a long time and have considered most uses. Oh, and they also come with built-in animation effects.

It is impossible to try all of these libraries in a project, and here is a list I have compiled based on my own experience and that of others. Remember, before you dive into a library, it's always a good idea to figure out how to integrate it into your project. In the end, it's up to you to pick which-it's just a list!

Free Data Visualization Library

If you're not a big company, open source libraries offer plenty of options. Add your ability to answer the questions I mentioned above and it will be easy to find the perfect match.

1、D3.js

D3 is one of the most popular JS libraries available not only for data visualization, but also for animation, data analytics, geography, and data reality applications. Use HTML, SVG and CSS technologies. It has a bunch of huge APIs, and some people think it's not a data visualization library at all. Everything you can think of can be done with this library, but it has its drawbacks, the learning curve is steep, and the documentation is outdated, which can easily lead to confusion.

Most APIs expose direct access to DOM, which may conflict with the way modern front-end frameworks like React or Vue work. But there's a way around this. A declarative data-driven document (d4 for short) recommends letting frameworks manipulate the DOM and strictly using D3 as the data API. You can find more information and examples here.

Applicable to: Any environment

GitHub：https://github.com/d3

2、Recharts

Dedicated to React. Recharts uses D3 as an engine and exports declarative components. It is very lightweight and allows you to create beautiful interactive diagrams by rendering SVG elements. It is easy to use and well documented. Charts are customizable, and the library itself provides some good examples. It has excellent static charting performance and includes built-in general charting tools such as legend tooltips and labels. Lag may occur when working with multiple animated charts on the same page and large datasets, but it is still suitable for most applications.

It's a bit disturbing that there are a lot of unresolved issues on GitHub. These questions may not be important, but the author doesn't seem to be very enthusiastic about answering them. So if you run into trouble, be prepared to dig deeper into the code.

Apply to: React

GitHub：https://github.com/recharts

3、Victory

This is a set of modular diagram components designed specifically for React and React Native. Victory does a good job on the basics-axis customization, labeling, passing different data sets for a single chart are all very simple, and adjusting styles and behaviors is very intuitive. It's really easy to use and allows you to create beautiful diagrams with minimal code. This is definitely a cross-platform library worth a try.

Available for: React, React Native

4、React-vis

This is a simple visualization library developed by Uber that allows you to create all the commonly used chart types: bar charts, tree charts, line charts, area charts, etc. Its API is very simple and flexible. It's lightweight and the animation is simple but fluid. It also allows you to write custom charts based on existing elements.

However, its minimalist styling may not suit everyone's taste (but I love it!). Although the response was mediocre, the documentation was easy to read.

Apply to: React

5、ApexCharts

This is a fairly simple SVG diagram library that also comes with Vue.js and React wrappers. It looks good on different devices, and the library allows custom hikes and provides comprehensive documentation. Performance may suffer on larger data sets, so make sure it does fit your project. According to ApexCharts author Juned Chhipa, the library was written to make it easier to zoom, pan, scroll data, place informative notes on charts, and more.

This library is relatively new and has a lot of room for growth, but if responsiveness and interactivity are especially important to you, then this beautiful library is worth a try!

Available for: React, Vue.js, pure JavaScript

6、Chart.js

A very popular open source repository with over 40,000 stars on GitHub. It is lightweight and allows you to build responsive diagrams with HTML5 Canvas elements. The ability to easily mix and match line charts and bar charts to combine different data sets is a great feature.

Chart.js provides you with six different chart types by default, it supports responsive, and is very beginner friendly. It's also my preferred repository when working with large datasets. Definitely one of the most interesting open source libraries.

Available for: React, Vue.js

7、Echarts

This library created by Baidu is very useful for data visualization on the Web. It is also available in English for large datasets. It also supports SVG and Canvas rendering.

Applicable to: all environments

8、Frappe Charts

This is a very simple library for zero-dependency diagrams. It is open source, with only 17 contributors, and is one of the smallest libraries on this list.

Frappe Charts is inspired by a software package similar to GitHub visuals that supports line charts, bar charts, and other types of charts. If you're looking for a small, lightweight bag, this is one!

Applicable to: Any environment

GitHub：https://github.com/frappe/charts

Official website: frappe.io/charts

9、Nivo

Nivo is a beautiful framework based on D3 and React that provides fourteen different types of components to present your data. It was released in 2017 and launched as a ProductHunt product on August 20, 2017.

Nivo offers many customization options and three rendering options: Canvas, SVG, and even API-based HTML. The documentation is excellent, and the Demo is configurable and fun. This is an advanced library, very simple, but there is little room for custom visualizations.

Apply to: React

GitHub：https://github.com/plouc/nivo

Official website: nivo.rocks/

10、Google Charts

A very popular charting Web service that I simply can't remove from the list. For many people, it is the JS library of choice because it provides a variety of pre-built chart types such as bar charts, line charts, area charts, calendar charts, geographic charts, and more. For me, however, this library is a bit excessive in most cases, and frankly I don't recommend using it.

It's free, but it's not open source (like every Google product). It is not responsive by default, but you can resize the chart using code. Depending on the chart type, there are different customization options and it is not entirely suitable for beginners. And you have to load it directly from Google URL instead of NPM package.

Applicable to: Any environment

Business Chart Library

Some libraries are free for individuals, but you'll have to pay to use them in commercial applications. The list below is common to large companies. Because they are truly comprehensive, customizable, and provide great customer support. If you are a business, you should check it out.

11、amCharts

This is one of the most popular graph libraries. Its beautiful design really sets it apart from the competition. Apple, Amazon, NASA, and many well-known companies are all users of amCharts, which is very impressive.

amCharts is a commercial tool that starts at $180 per website license. In return for your investment, you get all the types of graphics you need, including geomaps and excellent user support, with an average response time of less than 3 hours. This is a great solution for big companies.

Available for: Angular, React, Vue.js, Common JS apps, TypeScript

Official website: www.amcharts.com/

12、CanvasJS

This is another business tool that provides beautiful graphics across devices and browsers. However, it lacks some chart types, such as network charts, mini-charts, and meter charts. In addition, its learning curve is steep.

On the other hand, even with up to 100k + data points, it is very fast and works smoothly. Four default themes are provided and should fit most scenarios. Their customer list is also impressive: Apple, Bosch, Siemens, HP, Microsoft, etc.

Available for: Angular, React, jQuery, Pure JavaScript

Official website: canvasjs.com/

13、Highcharts

A JS library released in 2009, based on SVG, supporting VML and Canvas in older browsers. It provides different project templates. Highcharts is compatible with older browsers, including Internet Explorer 6.

For non-developers, this is a great solution because it has an integrated WYSIWYG (what you see is what you get) diagram editor. Its learning curve is very fluid and used by many major players, such as Facebook or Microsoft--there are even claims that 72 of the world's 100 largest companies have used it. This is a paid solution priced at $1500 with an unlimited commercial license.

Yet beneath the glossy exterior, it feels like it was written in 2009. A colleague of mine recently took me through it, and let me tell you, it wasn't very pleasant. It works great when you're not fiddling with it deep into the code layer, but when you want to... It's a chore.

Applicable to: Any environment

Official website: www.highcharts.com/

14、Zoomcharts

Another commercial JS data tool calls itself "the most interactive JavaScript graph library in the world." "In addition to responsiveness, it focuses primarily on multitouch gestures and native feel across a variety of devices. The library prides itself on beautiful visualizations that can be easily deployed in your product with very little code.

Zoomchatrts is Canvas-based and, using default settings, it is 20 times faster than SVG-based competitors for the same amount of data. I couldn't find the exact price of Zoomcharts, but I found some reviews calling it "expensive." But whatever the price, you get amazing interactivity, multi-touch gestures, and high-quality user support in return.

"JavaScript database visualization library what" content is introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the website. Xiaobian will output more high-quality practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.