Developing analytic apps is a bold new direction for product teams. The Toolbox is where we talk development best practices, tips, tricks, and success stories to help you build the future of analytics and empower your users with the insights and actions they need.



JavaScript data visualization tools are in greater demand now than ever before because of the enormous growth of data. <a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="https://www.sisense.com/dashboard-examples/marketing/" target="_blank">Marketing</a>, <a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="https://www.sisense.com/dashboard-examples/finance/" target="_blank">finance</a>, and <a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="https://www.sisense.com/dashboard-examples/sales/" target="_blank">sales</a> teams all rely on visualizations to help them understand their data. JavaScript visualization libraries empower product teams and other builders to create custom visuals that support their partners and can even be used to create new revenue streams in the form of customer-facing analytic apps.



Whatever their specialty or goals, users want their data to be displayed visually so that they can see insights from their data easily and act on them quickly. Data visualizations of <a href="https://www.sisense.com/glossary/kpi-dashboard/">key performance indicators</a> (KPI) can even be sent automatically to users as they change, allowing them to make faster, smarter decisions.



Let’s start at the beginning: What is data visualization, and why does it matter?



<a class="action-btn " href="https://www.sisense.com/whitepapers/everything-you-need-for-clear-and-efficient-data-visualization/" target="_blank" rel="noopener noreferrer">Read the free guide</a>



<h2 class="wp-block-heading">Understanding JavaScript data visualization libraries</h2>



JavaScript data visualization libraries don’t just create beautiful visuals, they help make business intelligence (BI) more real to end-users. The developers <a rel="noreferrer noopener" aria-label="building these visualizations (opens in a new tab)" href="https://www.sisense.com/blog/create-custom-embedded-analytic-visuals-with-the-sisense-adobe-xd-plugin/" target="_blank">building these visualizations</a> must be guided by their colleagues who will actually be making use of them. They must also have access to flexible BI platforms (like Sisense) that can handle visualizations from a wide array of JavaScript visualization libraries, which will allow them to input custom visuals that show users what they need to see in a way that makes sense to them. These visuals can include:



<ul><li>Customizable charts — sunburst, Sankey, dependency, and others&nbsp;</li><li>Flexible API with clear documentation and sample code</li><li>Vibrant chart animation capabilities</li><li>User interactivity with chart elements</li><li>Compatible with React, Angular, Vue, and other libraries</li><li>Chart/Data export to diverse formats: PDF, JPG, PNG</li><li>Multiple data type compatibility: XML, JSON, CSV</li></ul>



Of the 50 or so competing JavaScript visualization libraries available, we’re going to explore 5 libraries that deliver a wide array of features to try to help you determine which one is the best for your application.



This decision may be dictated by a single factor such as compatibility with an existing Angular app or by an end-user performance requirement such as minimum chart rendering time. We’ll explore the intricacies of the different JavaScript libraries by reviewing example charts and code snippets.&nbsp;



<h2 class="wp-block-heading">Stunning chart diversity with D3.js</h2>



<figure class="wp-block-image size-full fancybox"><img decoding="async" src="https://cdn.sisense.com/wp-content/uploads/javascript1.png" alt="" class="wp-image-108884"/></figure>



The D3.js data visualization library supports an impressive array of chart options. Combining user interactivity with chart animation puts this library in our top five. The best place to start comparing the capabilities of visualization libraries is to look at example charts and the code that generates their elements. So, let’s jump right into D3.js with a popular sample chart from this library’s GIT repo.&nbsp;



This example chart interactively reveals the hierarchy of relationships among the classes of an application. In this screenshot of the interactive animation, hovering the mouse over “Data” lights up the functions shared among the classes. In this scenario, the class functions which it imports highlight as red curves, while classes which import its functions are shown as blue curves:



<figure class="wp-block-image size-full fancybox"><img decoding="async" src="https://cdn.sisense.com/wp-content/uploads/javascript2.png" alt="" class="wp-image-108890"/></figure>



When reviewing the best visualization libraries, it is important to be aware that many other libraries are actually built with D3.js. For example, Nivo, Plotly.js, and Recharts are all built from the open-source D3.js library.



The D3.js API is flexible and features the popular <a href="https://www.sisense.com/blog/d3-visualization-dashboards/" target="_blank" rel="noreferrer noopener" aria-label="d3.js dashboard (opens in a new tab)">d3.js dashboard</a> which is also widely implemented in the best analytics applications — apps which demand the best quality chart performance. This code snippet contains the function which maps the hierarchy in the above chart (<a href="https://observablehq.com/@d3/hierarchical-edge-bundling" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">source</a>):



<pre class="wp-block-code"><code>function hierarchy(data, delimiter = ".") {
 let root;
 const map = new Map;
 data.forEach(function find(data) {
 const {name} = data;
 if (map.has(name)) return map.get(name);
 const i = name.lastIndexOf(delimiter);
 map.set(name, data);
 if (i &gt;= 0) {
 find({name: name.substring(0, i), children: &#91;]}).children.push(data);
 data.name = name.substring(i + 1);
 } else {
 root = data;
 }
 return data;
 });
 return root;
}</code></pre>



An impressive selection of D3.js chart types, along with interactive examples and code snippets,&nbsp; is available at <a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="https://github.com/d3/d3/wiki/Gallery" target="_blank">the D3.js GIT repo</a>.



<h2 class="wp-block-heading">Google Charts — all the basics</h2>



Featuring a comprehensive chart gallery and extensive documentation of the API, Google Charts fulfills the expectations one might have when “standing on the shoulders of a giant.” The <a href="https://developers.google.com/chart/interactive/docs/gallery">Chart Gallery</a> contains examples of 29 chart types with example code for developers who are getting started charting with JavaScript. Since we began on page one with a D3.js Sankey diagram, let’s compare that with Google’s Sankey:



<figure class="wp-block-image size-large"><img decoding="async" src="blob:https://www.sisense.com/02e02f40-27c8-4114-9f10-1a478d02ec43" alt=""/></figure>



Google Charts’ version has glowing color mouseover interactivity with popup comments and a rich set of features to bring the chart to life and keep the user focused on critical data. Here is the sample code to define the colors in the chart (<a href="https://developers.google.com/chart/interactive/docs/gallery/sankey">source</a>):



<pre class="wp-block-code"><code>var colors = &#91;'#a6cee3', '#b2df8a', '#fb9a99', '#fdbf6f',
 '#cab2d6', '#ffff99', '#1f78b4', '#33a02c'];
 var options = {
 height: 400,
 sankey: {
 node: {
 colors: colors
 },
 link: {
 colorMode: 'gradient',
 colors: colors
 }
 }
 };</code></pre>



Google Charts documentation is concise and clearly organized. It’s also is free to use, but not open source. Data must be piped to the Google Charts API for plotting. The implication here is that users may not be comfortable with the liability of shipping confidential client data out of the environment when the Google source can’t be hosted in-house. 



Let’s start at the beginning: What is data visualization, and why does it matter?



<a class="action-btn " href="https://www.sisense.com/whitepapers/everything-you-need-for-clear-and-efficient-data-visualization/" target="_blank" rel="noopener noreferrer">Read the free guide</a>



<h2 class="wp-block-heading">Highcharts: Strong community and API reference</h2>



A robust charting library, Highcharts has both free and paid versions. The source code can be installed in-house or in a Cloud PaaS, which is advantageous for <a href="https://www.sisense.com/blog/building-analytic-apps-essential-reading-for-developers-in-quarantine/" target="_blank" rel="noreferrer noopener" aria-label="analytic apps (opens in a new tab)">analytic apps</a> with strict data security constraints. A significant set of large enterprises use Highcharts, and so the community of contributing users is large. Beyond the opening list of standard features, Highcharts’ high points include:



<ul><li>Excellent API reference, and community showcase.</li><li>Compatible with Angular, React, and .NET plus more.</li><li>Charts export to all web image formats.</li></ul>



Let’s look at an interactive Highcharts example. A variation on the Sankey chart concept, the dependency wheel is also a flow diagram. However, the nodes are mapped to the edge of a circle with the links connecting the nodes. As with the Sankey, the width of the links and size of the nodes are proportional to the quantity of flow. Unlike the Sankey, though, the dependency wheel flow is multidirectional and single-layered. In the following example, a country’s export dependency on other countries is highlighted on mouseover event:



<figure class="wp-block-image size-full fancybox"><img decoding="async" src="https://cdn.sisense.com/wp-content/uploads/javascript4.png" alt="" class="wp-image-108902"/></figure>



<figure class="wp-block-image size-full fancybox"><img decoding="async" src="https://cdn.sisense.com/wp-content/uploads/javascript5.png" alt="" class="wp-image-108908"/></figure>



<h2 class="wp-block-heading">amCharts: Great for touchscreens</h2>



A distinguishing feature of the amCharts JS visualization library is specialized touch screen interactivity for charts displayed on mobile devices. This will appeal to endpoint users such as sales engineers who want to monitor product performance quickly while in the field. Zoom charts which illustrate more data at deeper levels can now be explored readily on tablets and phones.



amCharts is compatible with all the major frontend development frameworks like Angular and React. The <a href="https://www.amcharts.com/demos/animated-sankey-diagram/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">amCharts Sankey diagram</a> is configurable for animation. Here is an example with a distinctive color scheme which shows how the relative size of nodes and links illustrates quantitative proportionality in this chart of tech revenue distribution.



<figure class="wp-block-image size-full fancybox"><img decoding="async" src="https://cdn.sisense.com/wp-content/uploads/javascript6.png" alt="" class="wp-image-108914"/></figure>



Although amCharts’ primary product is a paid version, it is possible to use the library for free on the condition that all generated charts contain the amCharts logo. So, this will not work for companies offering a whitelabel analytics app. There is a rich set of <a href="https://www.amcharts.com/demos/">demos of all supported chart types</a> with complete documentation and code samples, all of which lends well to the customization of charts.



<h2 class="wp-block-heading">Recharts: built for React</h2>



Although Recharts is actually built from D3.js components, it is important to our discussion for two reasons. First, Recharts is specifically intended for use with React, as essentially all of the D3.js library is wrapped in React classes. Secondly, Recharts is very popular, boasting a number of downloads not far behind Highcharts. Now that we are operating in the age of ubiquitous <a href="https://www.sisense.com/blog/leveling-up-to-custom-actionable-analytic-apps-with-sisense-blox/" target="_blank" rel="noreferrer noopener" aria-label="white-labled web apps (opens in a new tab)">white-labled web apps</a>, many React developers will find themselves using Recharts without knowing that they’re actually using the D3.js core.



Another thing to note about the Recharts is that there are two significant disadvantages to using it. For one, there are substantial open issues on the GIT repo, and bugs seem to appear faster than they are resolved. Additionally, Recharts can only be used in React projects. The large number of downloads also speaks indirectly about the wildly popular React JavaScript framework. This paradoxical limitation to React projects likewise refers back to our initial point that the choice of visualization library may be dictated solely by the application’s pre-existing development framework.&nbsp;



<h2 class="wp-block-heading">Choosing the right JavaScript visualization library for you</h2>



Having surveyed five of the most popular JavaScript data visualization libraries, you can see that there are substantial differences. Can your infrastructure host the library locally? Is the library license paid or free and does that depend on the intended use? Here is a list of basic criteria to consider when making the decision:



<ul><li>Type of charts required: Gantt, Sankey, Dependency wheel.</li><li>Level of support for library customization.&nbsp;</li><li>Size and characteristics of dataset</li><li>Browser support for library of choice: Chrome, Firefox.</li><li>The JavaScript framework used for the app: Angular, React, etc.</li><li>Intended device: desktop, mobile, or both.</li></ul>



And yet there is still one more very important criterion for choosing the right visualization app: are you adapting the library for use with an analytic app? For example, Sisense Analytics can be extended to integrate with any JavaScript visualization library using our <a href="https://developers.sisense.com/pages/viewpage.action?pageId=557127">JavaScript Add-On Framework</a>.



Detailed documentation examples and code snippets are crucial for the quick and easy library usage. You can find both in the <a aria-label=" (opens in a new tab)" rel="noreferrer noopener" href="https://www.sisense.com/marketplace/" target="_blank">official Sisense marketplace</a> and <a aria-label=" (opens in a new tab)" rel="noreferrer noopener" href="https://support.sisense.com/hc/en-us/articles/115009313608-Sisense-Plugins-List" target="_blank">Community-Led Add-Ons</a>. Sisense implements a wealth of expert domain knowledge in the field of data visualization to generate a ton of actionable insights on live streaming data.



Let’s start at the beginning: What is data visualization, and why does it matter?



<a class="action-btn " href="https://www.sisense.com/whitepapers/everything-you-need-for-clear-and-efficient-data-visualization/" target="_blank" rel="noopener noreferrer">Read the free guide</a>



Eitan Sofer is a seasoned Sisenser, having spent the last 13 years building and shaping our core analytics product, focusing on user experience and platform engineering. Today, he runs the Embedded Analytics product line which powers thousands of customers and businesses, making them insights-driven. Eitan is also an avid music fan and surfer.

A Guide to the Best JavaScript Visualization Libraries

LinkedIn

Twitter

GitHub

curve-image-unique-image-unique

curve

3-dark-2-image-unique-image-unique

3 DARK 2

Get the latest in analytics right in your inbox.

Article