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

Last Reply one year ago By dharmendr

Posted one year 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 one year ago Modified on one year ago

Hi skp,

Use mixed type charts.

For more details refer below link.



<html xmlns="http://www.w3.org/1999/xhtml">
    <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'
<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%">