Data Visualization With DataTables.js and Highcharts.js

In this tutorial, you’ll learn how to visualize data by taking advantage of the DataTables.js and Highcharts.js JavaScript libraries.

Here’s what we’re going to build (check out the larger version for a better experience):

Required Libraries

For the purposes of this example, we’ll have to load the following libraries in our pen:

  • jQuery
  • DataTables.js
  • Highcharts.js

With that in mind, if you look under the Settings tab, you’ll see that I’ve included one external CSS file:

In the same way, I’ve also included four external JavaScript files:

Note: we had to add jQuery to our project because DataTables.js is a jQuery plugin. However, keep in mind that Highcharts.js is a pure JavaScript library, and thus doesn’t require jQuery.


To kick things off we define an element with the class of container which contains two sub-elements:

  • A table with 26 rows. The first row refers to the table headers th, while the other 25 rows carry country details. The source of our data for this example is
  • An empty div which will hold the chart.

Here’s the HTML structure: