Originally posted on logrocket.
In the simplest terms, data visualization refers to how we represent our data with visuals like charts, graphs, and so on. It is the representation of data in graphical format, usually a mapping or a relationship between data points and lines of a chart or graph. Generally, it entails designing the right visual interface for our data.
The form of the visualization usually depends on the relationship between the chosen graphical elements or types and the data points involved. The end goal is to communicate information derived from data sources clearly and effectively via visual or graphical means.
Data viz, as it is sometimes called, is particularly useful to help us tell stories about our data and, in the process, understand the representation of a large set of data point at a glance. Essentially, representing data in an aesthetically pleasing and easily consumable way are the major goals of data viz.
- Toast UI Chart
We’ll compare their pros and cons, key features and functionalities, philosophy, and so on. At the end of the day, the goal is to understand why we might pick one of these visualization libraries based on their available features and our particular use case.
Now let’s highlight these libraries in turn below:
Highcharts is a data visualization library solely based on native browser technologies, which means it doesn’t require client-side plugins like Flash. One of the main advantages of working with Highcharts is that it works well in all modern browsers, including mobile devices and Internet Explorer from version 6.
Highcharts runs on any server that supports HTML. We can even run Highcharts locally from a filesystem since all the rendering is done locally in a browser. Note that standard browsers use SVG for the graphics rendering.
Note: In terms of old browser (IE 6–8) support, some polyfills that contains common array functions are needed. Also, since older IE versions don’t support SVG rendering, VML renderer is also needed for Highcharts to work.
When it comes to basic customizations, we can apply a global theme. Themes are a set of options that are applied globally through the
Highcharts.setOptions method. There’s also a top-level configuration option, responsive, that includes a variety of responsive chart types.
Highcarts also has some performance metrics built in. With ES modules, for example, we can create our own custom Highcharts package files. Custom files can optimize browser load speed, for example, due to smaller file sizes and fewer files to request. For more details about other performance optimizations, refer to the documentation.
Unlike many charting libs — including Chart.js, for example — Highcharts has a built-in accessibility module. To include the accessibility module, simply add the following file after including any of the Highcharts JS files:
Other accessibility features include screen readers, internationalization, and so on. As an aside, Highcharts also comes with an export module, which allows users to download charts as PDF, PNG, JPG, or SVG. The export data module even allows exporting the chart data to CSV, XLS, or HTML table formats.
Since version 2, Highcharts has been built in a modular way, leaning on extensions for additional functionality. Extensions allow us to build or add more features within the capabilities of the library. More details can be found here.
Toast UI Chart
Toast UI Chart is a beautiful statistical data visualization library. Like Highcharts, Toast UI Chart also offers great support for legacy browsers. As a result, it guarantees an identical look across all browsers. It also draws fast with great performance and requires no polyfills. When it comes to the rendering mechanism, it uses native browser formats, including SVG and RVML.
Toast UI Chart is intuitive and easy to use. It’s also worth noting that it integrates well with today’s two most popular open-source frontend libs/frameworks: React and Vue.js. So when it comes to a simple, minimal data viz library for JS, Toast UI Chart should come to mind.
Toast UI Chart provides various options to easily change the chart in detail as well as a wide range of custom theme options. Basically what we mean here is that it comes with a bunch of chart types that are easily customizable. For example, chart components like the title, axes, legends, tooltips, plots, series, and more can be fully customized through the options.
To use this library in our projects, we can employ a package manager like npm or download from the source directly. It can also be served via CDN. Although it is not as powerful as D3.js in terms of chart types or animation, it is equally easy to get started with. To use the available chart types, we can have a look at the boilerplate examples available in the GitHub repo.
It also comes with a clean, nice-to-use API. As an added advantage, it is also responsive, zoomable, and contains a live update feature that allows users to view and manage new data as they are added in real time with the
addData API and the
Finally, it is open source and therefore free to use. All in all, Toast UI Chart provides many types of charts to visualize different kinds of data.
D3.js is a very flexible data viz library that follows a data-driven approach to DOM manipulation. It helps bring data to life using HTML, SVG, and CSS. It emphasizes web standards and has full support for all modern browsers.
D3 solves the crux of the problem, which allows an efficient manipulation of documents based on data. Performance-wise, it is extremely fast, which makes it easy to support large datasets and dynamic behaviors for interaction and animation.
The benefits of working with D3.js include the clean API reference, which contains various chart types. These basically consist of a collection of modules that are designed to work together. Note that we can use these modules independently or together as part of the default build. It also comes bundled with different community-supported plugins.
D3 also works well in areas of animations, data analysis, hierarchical data, and interaction — in fact, D3 is renowned for animation and interaction. For example, have a look at a simple example of an animated tree map.
Currently in v4, D3.js also comes bundled with plenty of community-developed resources, including tutorials, videos, classes, and books. The D3 team has also published hundreds of its own forkable examples and tutorials to boost learning and productivity. We can install it using either npm or Yarn.
Offering the quickest way to start playing with D3, it allows us to edit cells and run them automatically for rapid feedback. We can also add interaction or animation with almost no code! In fact, Observable is the ideal environment for learning D3 because it simplifies code with data flow, like a spreadsheet.
Recharts is a redefined chart library built with React and D3. It is a composable charting library, which allows us to quickly build our charts with decoupled, reusable React components. One of its major strong points is that its components are built on top of SVG elements with a lightweight dependency on D3 submodules.
Recharts allows very powerful customization of charts by tweaking component props and passing in custom components. Generally speaking, we can easily integrate Recharts into our React applications. To get started with Recharts, we can either install from npm or build the code directly from source.
Recharts also offers a number ways for users to add powerful interactions to their chart components. For example, we can easily drop in a tooltip component with rich hovering functionality. It boasts a clean and simple-to-use API, with support for multiple chart types, components, and shapes. Examples can be found in the documentation.
Chart.js is quite easy to use and also very customizable. It’s also open source, with extensive documentation maintained by open-source developers and more than eight chart types, including built-in chart types.
Developer features allow extending, customizing, and enhancing Chart.js in many different ways. The configuration is used to change how the chart behaves. There are properties to control styling, fonts, the legend, etc. As a side note, we can perform both global and dataset configurations.
Note: The global general options are defined in
Chart.defaults.global. The defaults for each chart type are discussed in the documentation for that particular chart type.
Chart.js charts are rendered on
canvas elements, which makes rendering quite fast. As such, it offers support for most modern browsers since the
canvas element is supported in all modern and major mobile browsers. As a plus, it integrates well with popular JS libraries.
Here’s an example of how to render a chart via the
<canvas id="myChart" width="400" height="400"></canvas>
The highlights of Chart.js include its responsiveness, which can be controlled via a few options the lib provides to control the resize behavior. This is usually achieved by detecting when the
canvas display size changes and updating the render size accordingly — despite some known drawbacks related to
canvas render size, which may lead to inaccurate rendering.
Chart.js also supports many chart extensions, plugins, and adapters. Plugins are the most efficient way to customize or change the default behavior of a chart. They were introduced at version 2.1.0 (global plugins only) and extended at version 2.5.0 (per chart plugins and options).
For large datasets or performance-sensitive applications, consider this tip: if your charts have long render times, it is a good idea to disable animations. Doing so means the chart needs to be rendered only once during an update instead of multiple times. This will have the effect of reducing CPU usage and improving general page performance.
When it comes to the available chart types, the major drawback for Chart.js is that it doesn’t currently support gauge charts or heat maps. And because charts are rendered on user-provided
canvas elements, this forces the user to make a decision on how to create the
canvas element in an accessible way.
These days, almost every application we build requires or leverages data to enhance functionality or user experience. These visualizations could be a metric to show a growing customer base or a graph that displays business expenses for various categories.
- Supported chart types
- Rendering method
- Easy-to-use APIs and overall good DX
- Community support
As a final note, if a data visualization library has all the aforementioned characteristics, it can generally be considered good on a use-case-by-use-case basis.
All of the libraries we have explored here are great, and the differences between them are not so huge — all have a good variety of supported features, a solid API interface, and good community support.
Are you adding new JS libraries to improve performance or build new features? What if they’re doing the opposite?
https://logrocket.com/signup/LogRocket works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app’s performance, reporting metrics like client CPU load, client memory usage, and more.
Build confidently — Start monitoring for free.