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

Last Reply 11 months ago By dharmendr

Posted 11 months 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'
               }
           }
       };
   })
You are viewing reply posted by: dharmendr 11 months ago.
Posted 11 months ago Modified on 11 months 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