Display Bar and Line (mixed) chart in single chart using ChartJS in AngularJS

Last Reply 10 days ago By dharmendr

Posted 10 days ago

How to display bar and line chart in a single chart in angularjs

Bar chart has one set of data and line chart has another set of data. x-axis is same for both the charts. y-axis is not same for both the charts.

I have done bar chart, but I wanted to add the line chart in the bar chart itself in angularjs.

<canvas id="bar" class="chart chart-bar" chart-data="driveDataJson.data" chart-labels="driveDataJson.labels" width="281%" chart-colours="driveDataJson.colours" chart-options="driveDataJson.options"></canvas>

 

$scope.months = null;
    $http.get(apiUrl + "/api/Warehouse/GetMonthDetails")
   .then(function (response) {
       $scope.months = JSON.parse(response.data);
       $scope.driveDataJson = {
           "data": [$scope.months[0].Qty, $scope.months[1].Qty, $scope.months[2].Qty, $scope.months[3].Qty, $scope.months[4].Qty, $scope.months[5].Qty, $scope.months[6].Qty],
           "labels": [$scope.months[0].MonthName, $scope.months[1].MonthName, $scope.months[2].MonthName, $scope.months[3].MonthName, $scope.months[4].MonthName, $scope.months[5].MonthName, $scope.months[6].MonthName],
           "options": {
               title: {
                   display: true,
                   text: 'Based on Quantity(Nos.)',
                   fontSize: 18,
                   position: 'bottom'
               }
           }
       };
   })
Posted 10 days ago Modified on 10 days ago

Hi skp,

Use mixed type charts.

For more details refer below link.

http://jtblin.github.io/angular-chart.js/

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Mixed type charts</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("MyApp", ["chart.js"]);
        app.controller("MyController", function ($scope) {
            $scope.driveDataJson = {
                "data": [[65, 25, 80, 49], [28, 59, 40, 19]],
                "labels": ["January", "February", "March", "April"],
                "options": {
                    title: {
                        display: true,
                        text: 'Based on Quantity(Nos.)',
                        fontSize: 18,
                        position: 'bottom'
                    }
                }
            };

            $scope.labels = $scope.driveDataJson.labels;
            $scope.data = $scope.driveDataJson.data;
            $scope.options = $scope.driveDataJson.options
            $scope.datasetOverride = [{
                label: "Bar chart",
                borderWidth: 1,
                type: 'bar'
            }, {
                label: "Line chart",
                borderWidth: 2,
                hoverBackgroundColor: "rgba(255,99,132,0.4)",
                hoverBorderColor: "rgba(255,99,132,1)",
                type: 'line'
            }];
        });
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <canvas id="base" class="chart-bar" chart-data="data" chart-labels="labels" chart-options="options"
        chart-dataset-override="datasetOverride" width="500%">
</canvas>
</body>
</html>

Demo