Chartist – Just simple responsive Charts

Chartist

Chartist is a powerful, highly customizable and feature-rich, but still small and widely supported Chart library. It creates (DPI-depending) responsive, animatable and flexible charts using SVG as “the future of illustration in web!”. All modern browsers, including Internet Explorer 9+ (Polyfill) and Appla Safari 7+, are supported too!

The library comes in a 10KB (Gzip) lightweight size with no dependencies at all. It looks still maintained, even if the last official stable release has been published in April 2017. There are also many wrappers and libraries like node-chartis, chartistAngularDirective.js and meteor-chartist-js.

Download the latest version of Chartist as .ZIP or as .TAR package!

npm i chartist --save

yarn add chartist --save

bower install chartist --save

Instructions

The library comes up with the a single JavaScript and Stylesheet, but also available as minified version and with a respective Source Map. The included SASS files allows to customize the styles quickly!

 

Load Chartist

The stylesheets should be linked within the HTML header, the JavaScript can be located wherever you want, but we recommend to load it immediately after the started <body> tag.

<!DOCTYPE html>
<html>
    <head>
        <!-- Required Stylesheet -->
        <link type="text/css" rel="stylesheet" href="/css/chartist.css" />
    </head>
    <body>
        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/chartist.min.js"></script>
    </body>
</html>

 

Use Chartist

This library doesn’t need a Canvas object, where it builds up his graphics. It still requires a selector or HTML Element as first parameter, on the respective Constructors. Optimally this element is just a DIV Container.

document.addEventListener("DOMContentLoaded", function(){
    new Chartist.Line('.ct-chart', {
        labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
        series: [
            [12, 9, 7, 8, 5],
            [2, 1, 3.5, 7, 3],
            [1, 3, 4, 5, 6]
        ]
    }, {
        fullWidth: true,
        chartPadding: {
            right: 40
        }
    });
});

 

Configuration

The Chartist library has a highly configurable and customizable JavaScript interface. It offers many function-depending constructors and helping methods. Therefore it is really recommended to visit the official rich documentation and to check out the the respective examples.

 

Leave a Reply

Top