How to Create Stunning Interactive Bar Charts Using JavaScript — Tutorial

How to Create a Simple JS Bar Chart in 3 Steps

  • Prepare the data.
  • Connect to a JS charts library.
  • Write some code.

1. Preparing the Data

var data = [120, 60, 30, 80, 50];
// X is item numbers [0,1,2,3,4,5]
// Y is the data values
[{
'x': Item One',
'value': 120
},{
'x': 'Item Two',
'value': 60
}...]

2. Connecting to a Charting Library

<script src="https://cdn.anychart.com/releases/v8/js/anychart-core.min.js"></script><script src="https://cdn.anychart.com/releases/v8/js/anychart-cartesian.min.js"></script>

3. Writing Some Code

<div id="container"></div>
var data = [
{x: 'Amazon', y: 120},
{x: 'DZone', y: 60},
{x: 'Gizmodo', y: 30},
{x: 'StackOverFlow', y: 80},
{x: 'CNET', y: 50}
];
var chart = anychart.bar();
chart.title('Website Traffic Stats');
chart.xAxis().title("Website");
chart.yAxis().title("Traffic Per Minute");
var series = chart.bar(data);
chart.container("container");
chart.draw();
<html>
<head>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-cartesian.min.js"></script>
</head>
<body>
<div id="container">
<script>
anychart.onDocumentLoad(function() {
// create the data
var data = [
{x: 'Amazon', y: 120},
{x: 'DZone', y: 60},
{x: 'Gizmodo', y: 30},
{x: 'StackOverFlow', y: 80},
{x: 'CNET', y: 50}
];
var chart = anychart.bar(); // create a chart
chart.title('Website Traffic Stats'); // create title for the chart
chart.xAxis().title("Website"); // create name for X axis
chart.yAxis().title("Traffic Per Minute"); // create name for Y axis
var series = chart.bar(data); // create bar series and pass data
chart.container("container"); // reference the container Id
chart.draw(); // initiate drawing the bar chart
});
</script>
</div>
</body>
</html>

How to Create Advanced JavaScript Bar Charts

1. Creating Multi-Series Bar Charts

<script src="https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js"></script>
var dataTable = anychart.data.parseHtmlTable('#dataTable');
var chart = anychart.bar(); chart.data(dataTable);
var legend = chart.legend(); legend.enabled(true); // enable legend
<html>
<head>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-cartesian.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js"></script>
</head>
<body>
<div id="container">
<table id="dataTable" border="1">
<caption>Website Traffic</caption>
<thead>
<tr>
<th>Websites / Traffic Source</th>
<th>Organic</th>
<th>Direct</th>
<th>Referral</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amazon</td>
<td>60</td>
<td>50</td>
<td>10</td>
</tr>
<tr>
<td>Dzone</td>
<td>30</td>
<td>20</td>
<td>10</td>
</tr>
<tr>
<td>Gizmodo</td>
<td>20</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>StackOverFlow</td>
<td>40</td>
<td>30</td>
<td>10</td>
</tr>
<tr>
<td>CNET</td>
<td>25</td>
<td>5</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
<script>
anychart.onDocumentLoad(function() {
var dataTable = anychart.data.parseHtmlTable('#dataTable'); // parse data from HTML table
var chart = anychart.bar(); // create chart
chart.xAxis().title("Website"); // create name for X axis
chart.yAxis().title("Traffic Per Minute"); // create name for Y axis
chart.data(dataTable); // specify data source
var legend = chart.legend();legend.enabled(true); // enable legend
chart.container("container"); // reference the container Id
chart.draw(); // initiate drawing the bar chart
});
</script>
</body>
</html>

2. Creating Stacked Bar Charts

chart.yScale().stackMode('value');
chart.yScale().stackMode('percent');

3. Adding Interactivity to Charts

chart.tooltip().title("Traffic Data");chart.tooltip().format("Website: {%categoryName} \n{%seriesName}: {%value}");
<html>
<head>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-cartesian.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js"></script>
</head>
<body>
<div id="container">
<table id="dataTable" border="1">
<caption>Website Traffic</caption>
<thead>
<tr>
<th>Websites / Traffic Source</th>
<th>Organic</th>
<th>Direct</th>
<th>Referral</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amazon</td>
<td>60</td>
<td>50</td>
<td>10</td>
</tr>
<tr>
<td>Dzone</td>
<td>30</td>
<td>20</td>
<td>10</td>
</tr>
<tr>
<td>Gizmodo</td>
<td>>20</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>StackOverFlow</td>
<td>40</td>
<td>30</td>
<td>10</td>
</tr>
<tr>
<td>CNET</td>
<td>25</td>
<td>5</td>
<td>20</td>
</tr>
</tbody>
</table>
<script>
anychart.onDocumentLoad(function() {
var dataTable = anychart.data.parseHtmlTable('#dataTable'); // parse data from HTML table
var chart = anychart.bar(); // create chart
chart.xAxis().title("Website"); // create name for X axis
chart.yAxis().title("Traffic Per Minute"); // create name for Y axis
chart.data(dataTable); // specify data source
chart.yScale().stackMode('percent'); // setting percent stacking
var legend = chart.legend();legend.enabled(true); // enable legend
chart.tooltip().title("Traffic Data"); // configuring the tooltip
chart.tooltip().format("Website: {%categoryName} \n{%seriesName}: {%value}");
chart.container("container"); // reference the container Id
chart.draw(); // initiate drawing the bar chart
});
</script>
</div>
</body>
</html>

Wrapping Up

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store