Chartist.JS is an open source Charting JavaScript library built with SVG. Chartist was built by Gionkunz to provide a solution to the problems faced by charting libraries. It’s lightweight, simple and flexible to integrate into a website. Chartist provides designers and developers the opportunity to create charts that do not depend on other libraries and works perfectly across browsers.
Chartist uses inline-SVG to draw simple, fully responsive and customizable charts in the DOM by using CSS to style the charts and JavaScript to handle the configuration of the charts. Some of the advantages of using Chartist.JS over other charting libraries are; charts can be configured to be responsive using CSS3 media queries and it puts more emphasis on convention rather than configuration.
For this tutorials, we are going to create a simple web page to demonstrate how to setup and integrate Chartist.JS charts into our websites. We will use HTML5, CSS3 and some JavaScript codes for the setup.
To setup our web page we need to follow the following steps;
<!DOCTYPE html>
<html>
<head>
<title>Utopian-io - Responsive and customizable charts using Chartist.JS</title>
</head>
<body>
</body>
</html>
To integrate Chartist.JS into our webpage we’ll need to get the library and we have two options on how to go about it. One of the option is to download the library from the official repository here https://github.com/gionkunz/chartist-js/ or we can use the available CDN links. In this tutorial we’re using the CDN links but it’s recommended to download and integrate it locally for production purpose.
The necessary CSS and JS CDN links are;
CSS
<link rel="stylesheet" href="http://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
JS
<script src="http://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
NB: The additional files linked are that of bootstrap which we’ll use to setup our web page. Our work does depend on it. If you’re still interested you can get it here.
All the required files are linked. Let’s begin;
<body> section in “chartist.html” and create two div’s with a class.<div class="ct-chart-line ct-perfect-fourth"></div>
<div class="ct-chart-bar ct-perfect-fourth"></div>
<script type="text/javascript"> </script> to initialize our charts.// Our labels and three data series
var data = {
labels: ['Week1', 'Week2', 'Week3', 'Week4', 'Week5', 'Week6'], // lables of the chart
series: [ // the data series in other words the lines
[50, 41, 103, 170, 151, 250], //first data series
[93, 29, 91, 15, 14, 6], //second data series
[2, 1, 9, 4, 2, 10] //third data series
]
};
// We are setting a few options for our chart and override the defaults
var options = {
// It will not draw the line chart points
showPoint: false,
// Disables line smoothing
lineSmooth: false,
// X-Axis specific configuration
axisX: {
// We can disable the grid for this axis
showGrid: false,
// and also don't show the label
showLabel: false
},
// Y-Axis specific configuration
axisY: {
// Lets offset the chart a bit from the labels
offset: 60,
// The label interpolation function enables us to modify our values
// used for the labels on each axis.
labelInterpolationFnc: function(value) {
return '$' + value;
}
}
};
// We Pass our configuration as third parameter to the chart function for it work
new Chartist.Line('.ct-chart-line', data, options);
new Chartist.Bar('.ct-chart-bar', {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
series: [
[5, 4, 3, 7, 5, 10, 3]
]
}, {
axisX: {
// On the x-axis start means top and end means bottom
position: 'start'
},
axisY: {
// On the y-axis start means left and end means right
position: 'end'
}
});
First of all, we set up our chart data via var data = { labels: ['week1', ...], series: [50, …] } and use var options = { } for settings. There are various options you can use for your charts, here. Next, is to pass the configuration to our chart function as the last line in our scripts. Description in form of comments provided in the codes for better understanding.
It’s Working… Our line and bar chart working perfectly
<!DOCTYPE html>
<html>
<head>
<title>Utopian-io - Responsive and customizable charts using Chartist.JS</title>
<link rel="stylesheet" href="chartist.min.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="padding-top: 5rem;">
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Utopian-io</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<main role="main" class="container">
<h1>Utopian-io Contributions</h1>
<p class="lead">A sample chart showing average rewards and daily rate of contributions.</p>
<div class="container welcome-div">
<div class="row">
<div class="col-md-6">
<div class="ct-chart-line ct-perfect-fourth"></div>
</div>
<div class="col-md-6">
<div class="ct-chart-bar ct-perfect-fourth"></div>
</div>
</div>
</div>
</main>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="chartist.min.js"></script>
<script type="text/javascript">
// Our labels and three data series
var data = {
labels: ['Week1', 'Week2', 'Week3', 'Week4', 'Week5', 'Week6'], // lables of the chart
series: [ // the data series in other words the lines
[50, 41, 103, 170, 151, 250], //first data series
[93, 29, 91, 15, 14, 6], //second data series
[2, 1, 9, 4, 2, 10] //third data series
]
};
// We are setting a few options for our chart and override the defaults
var options = {
// It will not draw the line chart points
showPoint: false,
// Disables line smoothing
lineSmooth: false,
// X-Axis specific configuration
axisX: {
// We can disable the grid for this axis
showGrid: false,
// and also don't show the label
showLabel: false
},
// Y-Axis specific configuration
axisY: {
// Lets offset the chart a bit from the labels
offset: 60,
// The label interpolation function enables us to modify our values
// used for the labels on each axis.
labelInterpolationFnc: function(value) {
return '$' + value;
}
}
};
// We Pass our configuration as third parameter to the chart function for it work
new Chartist.Line('.ct-chart-line', data, options);
new Chartist.Bar('.ct-chart-bar', {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
series: [
[5, 4, 3, 7, 5, 10, 3]
]
}, {
axisX: {
// On the x-axis start means top and end means bottom
position: 'start'
},
axisY: {
// On the y-axis start means left and end means right
position: 'end'
}
});
</script>
</body>
</html>
Some of my previous works are;