Data is all around us. We use it for optimizing performance, delivering services and improving efficiency. However, raw numbers aren't always the best way to pass around information. People are more likely to retain whatever data you are presenting to them if it is in visual format instead of a textual one. This makes charts an indispensable tool to share information.
JavaScript provides a lot of free libraries that you can use to create charts on your websites. In this post, we will create a list of the best free JavaScript chart libraries and provide a brief overview of their features to help you make an informed choice.
1. Chart.js
One of the first libraries that comes to mind when thinking about drawing charts on a website is Chart.js. Two biggest advantages of using this library is that it is very easy to learn and integrate in your website and it also offers the ability to create eight common types of charts. This includes line chart, bar chart, radar chart, bubble chart, scatter chart, area chart, pie chart and polar chart. You can also show more than two types of charts on the same graph.
Animated demo by rozklad.
The library uses the HTML5 canvas element to render all the charts and those charts are responsive by default. This means that they will adapt to accommodate variations in screen sizes. Different aspects of the charts can also be animated with the out-of-box methods provided by the library.
2. Chartist.js
The Chartist.js library is another easy to use solution for people who want to create their own charts with help of JavaScript. There are some similarities as well as fundamental differences between Chart.js and Chartist.js.
Chartist demo by Ian Whitfield.
This library is lightweight and responsive just like Chart.js. It is also easy to learn and supports all the basic chart types like line chart, bar chart and pie chart etc. The library does not have any external dependencies that you have to load to make the charts work.
One big difference between Chart.js and Chartist.js is that the latter renders its charts using SVG. All the charts are divided into many sub-types. For example, you can create simple line charts as well as line charts with filled underlying area or bi-polar line charts.
Chartist.js strictly focuses on just providing the functionality to render charts. This means that you won't get built-in functionality for event handling or showing labels etc. However, they are relatively easy to add all by yourself.
3. D3.js
The D3.js library, short for Data Driven Documents, is one of the heavyweights in the area of data visualization. You can use this library to represent data visually in any way you like. This includes standard chart types as well.
D3 demo by Jahid Hssan.
The biggest advantage of this library is the power and flexibility you get when it comes to creating any charts. The library allows you to create almost anything that you can imagine to represent you data. You are not limited to just common chart types. The library uses a mix of technologies like SVG, Canvas and HTML to create any visual element.
So much flexibility in terms of rendering means that there will be a steep learning curve to use everything the library has to offer. There are around 30 modules and over 1000 methods to help you get things done.
4. C3.js
Some people might be excited about using D3.js to create charts on their website but they could get discouraged by the steep learning curve. What if I told you there is a solution to this problem?
The C3.js library provides a middle ground where the charts you create still use D3.js under the hood but you don't have to spend as much time on writing the code to do so or learn every in and out of the D3.js library. It is a great solution for people who are primarily interested in creating charts based on D3.js.
C3 demo by Beat Temperli.
Three features that make the library useful are its ease of use, the customization options and the control you have over the rendered charts. This library is basically a wrapper around D3.js so it does all the heavy-lifting needed to create a chart.
The library also gives custom classes to each element that it renders making it easier for you to provide your own styling. Finally, there are quite a few callback that you can use to control the behavior of the charts even after they have been rendered.
5. Frappe Charts
Frappe Charts is an amazing open source library that helps you create stylish an responsive charts with ease. There are no extra dependencies that you have to load to render the charts.
Demo by Kamal Dev.
The library comes with many built-in charts types like bar charts, line charts, area charts, pie charts and donut charts. You can also create some percentage based charts that show share of different items similar to a pie chart but on a bar instead of a circle. You can also create heat-map charts similar to what GitHub shows for contributions to repositories.
One of the things that you will like about this library is the scope of customization that it provides. The tooltips that come with the library are fantastic. You can also annotate your charts by marking different lines and regions. There are a lot of configuration options available and you can even modify the data points after they have been rendered.
6. Plotly.js
Plotly.js is also a free open sourced JavaScript library that comes with an extended list of features. The library also has modules for Python and R in case you want to draw some charts in those languages.
Demo from plotly.
Plotly is built on top of D3.js and stackgl. However, unlike D3 the developers of Plotly specifically focused on making it much easier to use and draw common chart types fairly quickly. This is ideal for people who are looking for a lot of different chart types. Plotly can help you create 40 different types of charts covering everything from basic line charts, bar charts and scatter plots to statistical charts like Histograms and 2D density plots.
The library comes with built-in event handling and has you covered for click, hover and selection events among others. It also offers a lot of other configuration options and useful functionality like zooming in and out, panning and resetting etc. Plotly.js gives you the ability to make the charts editable as well as use your own locales for displaying text in labels.
7. Apex Charts
Apex charts describes itself as a modern JavaScript charting library to build interactive charts with simple API. Creating charts with the library is actually a simple process. You just need to pass all the required data like chart type, labels and dataset that you want to plot as an object with key-value pairs and the library will take care of rendering everything.
Demo by Rubén Prol.
Some other remarkable features of the library include the ability to create different charts and then synchronize them. Changes you make to one chart will then reflect in the other one. There are many options available for you to interact with the charts. You can zoom in and out, pan as well as scroll up and down the data.
The available chart types include line chart, bar chart, pie and donut chart, radar chart and candlestick among others. You can also mix different chart types together like showing bar, line and area charts overlaid on top of each other. It is also possible to add your own annotations and update the chart data dynamically.
8. uPlot
The uPlot JavaScript charting library claims to be a small and fast solution for people who want to show a lot of data points without any adverse effects on performance. They also provide comparison of speed with some popular charting libraries on their GitHub page.
One example of amazing performance metric is that the library can plot around 150,000 data points in 135ms. Other features includes very fast and responsive zooming and hovering capabilities. The following CodePen demo creates a chart with 100k data points.
Demo by Stephen Wicklund.
Some useful features of the library include multiple y-axes, scales and grids. Different types of scales like linear and logarithmic. You can use the library to create line charts, bar charts and area charts among other types. Appearance of the charts can be customized with properties like stroke, fill and dash.
There are a couple of things that might discourage you from using the library though. The huge performance boost comes at a cost. The library does not offer any built-in transitions and animations. There is also no built-in behavior to handle scrolling and zooming behavior. However, plugins exist to give you that functionality.
Final Thoughts
We have covered 8 popular and free JavaScript chart libraries that try to address different kinds of needs. Each of them has their own strength and weakness so you can pick the ones that do the job for you and meet all your requirements. For example, Chart.js is great if you want something simple and easy to use or go with Apex Charts to create more advanced charts.
See some other demos posted by the libraries on their pages to see which of them are capable of providing features you like.
No comments:
Post a Comment