What Will I Learn?

You will learn about Chartist.JS Charting library
You will learn how to integrate charts in your website
You will learn how to customize and animate charts

Requirements

You must have basic HTML and CSS knowledge
You must have basic JavaScript knowledge
You need a Text Editor, Web browser and internet connection to download resources if any.

Difficulty

Intermediate

Tutorial Contents

Introduction

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.

**FINAL RESULT** ![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1519665556/gq528nv8ccxchawpwdk5.png)

STEPS

Setup web page

To setup our web page we need to follow the following steps;

Open your text editor and create a file and save and save it as “chartist.html” in your development folder.
Write the standard HTML5 elements we use in defining a HTML file inside our “chartist.html”. Something like this;

<!DOCTYPE html>
<html>
  <head>
    <title>Utopian-io - Responsive and customizable charts using Chartist.JS</title>   
  </head>
  <body> 
	
  </body>
</html>

Integrating Chartist.JS

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">

<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;

Steps:

Find the <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>

Go to the bottom of the file and write the following JavaScript codes within <script type="text/javascript"> </script> to initialize our charts.
For the line chart, that’s our first div. These are the codes that will produce a line chart with three data series.

// 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);

Bar Chart

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'
	  }
	});

Code Explanation

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.

FINAL RESULT in chrome web browser

It’s Working… Our line and bar chart working perfectly

Source Code

<!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>

Curriculum

Some of my previous works are;

Posted on Utopian.io - Rewarding Open Source Contributors

How to Create responsive and customizable charts using Chartist.JS

What Will I Learn?

Requirements

Difficulty

Tutorial Contents

Introduction

STEPS

Setup web page

Integrating Chartist.JS

Steps:

Bar Chart

Code Explanation

Source Code

Curriculum

Replies (12)

What Will I Learn?

Requirements

Difficulty

Tutorial Contents

Introduction

STEPS

Setup web page

Integrating Chartist.JS

Steps:

Bar Chart

Code Explanation

Source Code

Curriculum

You've got upvoted by Utopian-1UP!

Hey @aliyu-s I am @utopian-io. I have just upvoted you!

Achievements

Community-Driven Witness!

You've got upvoted by `Utopian-1UP`!