Responsive charts with chartist.js -

Charts play major role when we want to show huge data. The visuals are pretty easy to understand and humans are great to seeing pattern, but numbers trouble them. Graphs and charts can show the data easily.

Chartist.js

So here you go with chartist.js and the great thing is now you have trendy charts with responsive user interface.

You can create line chart, bar chart, pie chart with many more customizations.

Lets get started with simple example:
HTML:

<html>
  <head>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
    <script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
  </head>
</html>

JS:

var data = {
  // A labels array that can contain any sort of values
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  // Our series array that contains series objects or in this case series data arrays
  series: [
    [5, 2, 4, 2, 0]
  ]
};

// As options we currently only set a static size of 300x200 px. We can also omit this and use aspect ratio containers
// as you saw in the previous example
var options = {
  width: 300,
  height: 200
};

// Create a new line chart object where as first parameter we pass in a selector
// that is resolving to our chart container element. The Second parameter
// is the actual data object. As a third parameter we pass in our custom options.
new Chartist.Bar('.ct-chart', data, options);

See the Pen How to get start with chartist.js by Mufeed (@mufeedahmad) on CodePen.

Demo

About mufeed

India based user experience developer. He is specialized in web and mobile user interface design and development.
This entry was posted in HTML / CSS, Java script / jQuery, Mobile Tech and tagged , , , . Bookmark the permalink.

Leave a Reply