Implementing Charts in AngularJS Using Chart.js

Chart.js is a powerful and lightweight JavaScript library that allows you to create interactive and visually appealing charts in AngularJS applications. This guide will help you integrate Chart.js with AngularJS step by step. 🚀

1. Setting Up Chart.js in AngularJS

Step 1: Include Chart.js in Your Project

You can include Chart.js via a CDN in your index.html file:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js"></script>

Alternatively, you can install it using npm:

shCopyEditnpm install chart.js

Step 2: Create an AngularJS App

Define a simple AngularJS module and controller:

var app = angular.module("chartApp", []);

2. Creating a Basic Chart in AngularJS

Step 1: Define the Controller

Modify your AngularJS controller to initialize the chart:

app.controller("ChartController", function($scope) {
    $scope.initChart = function() {
        var ctx = document.getElementById("myChart").getContext("2d");

        var myChart = new Chart(ctx, {
            type: "bar",  // Change to 'line', 'pie', etc.
            data: {
                labels: ["January", "February", "March", "April", "May"],
                datasets: [{
                    label: "Sales",
                    data: [10, 25, 15, 30, 20],
                    backgroundColor: "rgba(54, 162, 235, 0.5)",
                    borderColor: "rgba(54, 162, 235, 1)",
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false
            }
        });
    };
});

Step 2: Add HTML for the Chart

<div ng-app="chartApp" ng-controller="ChartController" ng-init="initChart()">
    <canvas id="myChart" width="400" height="200"></canvas>
</div>

Now, the bar chart will be displayed in your AngularJS app!

3. Adding Multiple Charts

To create multiple charts, define them separately inside the controller:

app.controller("ChartController", function($scope) {
    $scope.initCharts = function() {
        var barChartCtx = document.getElementById("barChart").getContext("2d");
        var pieChartCtx = document.getElementById("pieChart").getContext("2d");

        // Bar Chart
        new Chart(barChartCtx, {
            type: "bar",
            data: {
                labels: ["Red", "Blue", "Yellow"],
                datasets: [{
                    label: "Votes",
                    data: [12, 19, 3],
                    backgroundColor: ["red", "blue", "yellow"],
                    borderWidth: 1
                }]
            }
        });

        // Pie Chart
        new Chart(pieChartCtx, {
            type: "pie",
            data: {
                labels: ["Apples", "Bananas", "Cherries"],
                datasets: [{
                    data: [30, 45, 25],
                    backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"]
                }]
            }
        });
    };
});

Step 2: Add HTML for Multiple Charts

<div ng-app="chartApp" ng-controller="ChartController" ng-init="initCharts()">
    <canvas id="barChart" width="400" height="200"></canvas>
    <canvas id="pieChart" width="400" height="200"></canvas>
</div>

Now, both a Bar Chart and a Pie Chart will be displayed!

4. Dynamic Data Binding in Charts

You can update the chart dynamically using $scope in AngularJS.

Step 1: Modify Controller to Update Chart Data

app.controller("ChartController", function($scope) {
    var chart; // Store chart instance

    $scope.initChart = function() {
        var ctx = document.getElementById("dynamicChart").getContext("2d");

        chart = new Chart(ctx, {
            type: "line",
            data: {
                labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
                datasets: [{
                    label: "Visitors",
                    data: [5, 10, 8, 15, 12],
                    backgroundColor: "rgba(255, 99, 132, 0.2)",
                    borderColor: "rgba(255, 99, 132, 1)",
                    borderWidth: 2
                }]
            }
        });
    };

    // Function to update chart dynamically
    $scope.updateChart = function() {
        chart.data.datasets[0].data = [15, 20, 10, 25, 30]; // New Data
        chart.update();
    };
});

Step 2: Add HTML to Update Chart Data

<div ng-app="chartApp" ng-controller="ChartController" ng-init="initChart()">
    <canvas id="dynamicChart" width="400" height="200"></canvas>
    <button ng-click="updateChart()">Update Data</button>
</div>

Now, clicking the button updates the chart dynamically!

5. Using Chart.js with API Data

If you want to fetch dynamic data from an API and display it in a chart, use $http service.

Step 1: Modify Controller to Fetch Data

app.controller("ChartController", function($scope, $http) {
    $scope.loadChartData = function() {
        $http.get("https://api.example.com/data")  // Replace with your API URL
            .then(function(response) {
                var data = response.data;
                var labels = data.map(item => item.month);
                var values = data.map(item => item.sales);

                var ctx = document.getElementById("apiChart").getContext("2d");
                new Chart(ctx, {
                    type: "line",
                    data: {
                        labels: labels,
                        datasets: [{
                            label: "Monthly Sales",
                            data: values,
                            backgroundColor: "rgba(54, 162, 235, 0.2)",
                            borderColor: "rgba(54, 162, 235, 1)",
                            borderWidth: 2
                        }]
                    }
                });
            });
    };
});

✅ Step 2: Add HTML for API Chart

<div ng-app="chartApp" ng-controller="ChartController">
    <button ng-click="loadChartData()">Load Chart Data</button>
    <canvas id="apiChart" width="400" height="200"></canvas>
</div>

This will fetch real-time data from an API and display it in a chart!