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 a visual format instead of a textual one. This makes charts an indispensable tool for sharing information.
One of the first libraries that comes to mind when thinking about drawing charts on a website is Chart.js. The two biggest advantages of using this library are that it is very easy to learn and integrate in your website, and that it lets you create eight common types of charts: line, bar, radar, bubble, scatter, area, pie, and polar charts. 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.
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 charts, bar charts, pie charts, 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 bipolar line charts.
Chartist.js strictly focuses on providing the functionality to render charts. This means that you won't get built-in functionality for event handling, showing labels, etc. However, they are relatively easy to add all by yourself.
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 your data. You are not limited to 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 1,000 methods to help you get things done.
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 callbacks 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 and 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 chart types, like bar, line, area, pie, and donut charts. You can also create some percentage-based charts that show the 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.
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, resetting, etc. Plotly.js lets you make the charts editable or use your own locales for displaying text in labels.
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, or scroll up and down the data.
The available chart types include line, bar, pie, donut, radar, and candlestick charts, 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.
One amazing performance metric is that the library can plot around 150,000 data points in 135ms. Other features include very fast and responsive zooming and hovering capabilities. The following CodePen demo creates a chart with 100,000 data points.
Demo by Stephen Wicklund.
Some useful features of the library include multiple y-axes, scales, and grids, as well as 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. And you can customize the appearance of the charts 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.
See some other demos posted by the libraries on their pages to see which of them are capable of providing features you like.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post