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

skp

SOLVED CLOSED ACTIVE ANSWERED
User: skp
Posted: on Aug 08, 2019 11:18 PM
Forum: AngularJS
Answer: 1
Views: 5480
Sample Code: Download

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'
               }
           }
       };
   })

dharmend...

0 3

Reply
ANSWER
User: dharmendr
Replied: on Aug 09, 2019 02:23 AM
Modified: on Aug 09, 2019 03:30 AM
Report

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

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

Company

Explore

Follow us

Contact Us