Chartjs-Angular and ChartJS to create bar chart

by

1👍

✅

There seems to be an error in your HTML. Your canvas tags are not closed properly. I noticed that this is an issue if you copy the code from the angular-charts example on their site. Prettying annoying. You may also need to set the height and width of your canvas so that it displays correctly.

<html>

<head>
    <meta charset="utf-8">
    <title>Test</title>

    <script>
        var app = angular.module('app', ['chart.js']);

        app.controller('BarCtrl', function($scope) {
            $scope.labels = ['2006', '2007', '2008',       '2009', '2010', '2011', '2012'];
            $scope.series = ['Series A', 'Series B'];

            $scope.data = [
                [65, 59, 80, 81, 56, 55, 40],
                [28, 48, 40, 19, 86, 27, 90]
            ];
        });
    </script>


</head>

<body ng-app="app">
    <div ng-controller="BarCtrl">
        <canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels" chart-series="series" width="400" height="400">
        </canvas>
    </div>


<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/chart.js/dist/Chart.js"></script>
<script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script>


</body>

</html>

Leave a comment