angular-smart-chartist

an amazing web-component which bring you the functionality from chartist

Github Source

Be smart, be simple!

Bar

Line

Pie

Let's make angular more powerful, and easier to use

Try to make it fun

HTML


<chartist asc-tooltip="lineTooltip" class="ct-chart ct-minor-seventh" type="Line" data="lineData"></chartist>

JavaScript


'use strict';
var demo = angular.module('demo', ['angular-smart-chartist']);

demo.controller('DemoController', function($scope) {
    $scope.barData = {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        series: [
            [5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
            [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
        ]
    };

    $scope.barOpts = {
        seriesBarDistance: 10
    };

});

HTML


<chartist asc-tooltip="lineTooltip" class="ct-chart ct-minor-seventh" type="Line" data="barData" options="barOpts"></chartist>

JavaScript


'use strict';
var demo = angular.module('demo', ['angular-smart-chartist']);

demo.controller('DemoController', function($scope) {
    $scope.lineTooltip = true;
    $scope.lineData = {
        labels: ['1', '2', '3', '4', '5', '6'],
        series: [{
            name: 'Fibonacci sequence',
            data: [1, 2, 3, 5, 8, 13]
        }, {
            name: 'Golden section',
            data: [1, 1.618, 2.618, 4.236, 6.854, 11.09]
        }]
    };
});

HTML


<chartist asc-tooltip="lineTooltip" class="ct-chart ct-square cus-pie" type="Pie" data="pieData"></chartist>

JavaScript


'use strict';
var demo = angular.module('demo', ['angular-smart-chartist']);

demo.controller('DemoController', function($scope) {
    $scope.pieData = {
        labels: ['Bananas', 'Apples', 'Grapes'],
        series: [20, 15, 40]
    };
});