Chartjs-How to install chart.js

by

7đź‘Ť

If I understand correctly, you’re looking to use ChartJS altogether. The package you download from Github includes a folder called Dist, which is where the distribution files are held.

Inside you’ll find 4 files. Two are “bundles”, which include Moment.JS used for time-scales. The other two don’t. Finally, 2 are minified, the others aren’t.

Basically, to “install” ChartJS, all you need to do is make sure it’s getting referenced in your install. For the sake of simplicity, here’s a CDN link of ChartJS v2.5:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

Include that in the header of your page and you can now use ChartJS.

All we have to do now is render a chart:

<canvas id="myChart" width="400" height="400"></canvas>

Finally, initiate the chart. Here’s the example code from the start of the docs:

<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
    }]
},
options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }]
    }
}
});
</script>

Your page should now render a bar chart!

0đź‘Ť

Check This

…

  <script>  


    javascript 

    angular.module("app", ["chart.js"])
      // Optional configuration
      .config(['ChartJsProvider', function (ChartJsProvider) {
        // Configure all charts
        ChartJsProvider.setOptions({
          chartColors: ['#FF5252', '#FF8A80'],
          responsive: false
        });
        // Configure all line charts
        ChartJsProvider.setOptions('line', {
          showLines: false
        });
      }])
      .controller("LineCtrl", ['$scope', '$timeout', function ($scope, $timeout) {

      $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
      $scope.series = ['Series A', 'Series B'];
      $scope.data = [
        [65, 59, 80, 81, 56, 55, 40],
        [28, 48, 40, 19, 86, 27, 90]
      ];
      $scope.onClick = function (points, evt) {
        console.log(points, evt);
      };

      // Simulate async data update
      $timeout(function () {
        $scope.data = [
          [28, 48, 40, 19, 86, 27, 90],
          [65, 59, 80, 81, 56, 55, 40]
        ];
      }, 3000);
    }]);
</script>

 </html>

0đź‘Ť

Type in angular CLI – npm install --save chart.js

0đź‘Ť

npm i chart.js

For more information about Chart.js, Visit https://installmd.com/i/javascript/chart-js

Leave a comment