How to set single color on each bar in angular chart js

Question

Here is my html code:

<canvas id="bar" class="chart chart-bar"
            chart-data="expenseData" chart-labels="labels" chart-series="series" chart-options="chartOptions" colours= "colours">

    </canvas>

Here is the js code:

var setGraphDate = function () {
        var xData = [];
        var yData = [];
        $scope.Data.ExpenseRecords.forEach(function (g) {
            yData.push(g.PercentOfCompletion);
            xData.push(g.TspShortName);
        });
        $scope.colours = "rgba(224, 108, 112, 1)";
        $scope.labels = xData;
        $scope.expenseData = yData;
        $scope.series = ['Expense Graph'];
        $scope.chartOptions = {

            legend: {
                display: false
            },

            },
            title: {
                display: true,
                text: 'TSP Burn Rate'
            },

            // Option to show VALUES on chart
            events: false,
            tooltips: {
                enabled: false
            },
            hover: {
                animationDuration: 0
            }
    };

The color of each bar is different and changes on each reload as well.

I want only blue color in all bars.

score 4 · Accepted Answer · answered Jan 07 '18 at 11:31

Use

chart-dataset-override="colors"

DEMO

angular.module("app", ["chart.js"]).controller("DoughnutCtrl", function ($scope) {
  $scope.results = {'1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, '7': 0, '8': 0, '9': 0, '10': 0};
  $scope.labels = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
  
  $scope.data = [
    [1, 3, 5, 8, 9, 10, 11, 12, 33, 5]
  ];
  $scope.colors = [{ 
    fillColor: 'rgba(59, 89, 152,0.2)',
    strokeColor: 'rgba(59, 89, 152,1)',
    pointColor: 'rgba(59, 89, 152,1)',
    pointStrokeColor: '#fff',
    pointHighlightFill: '#fff',
    pointHighlightStroke: 'rgba(59, 89, 152,0.8)'
  }];
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Multi Slot Transclude</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>
</head>
<body ng-app="app" ng-controller="DoughnutCtrl">
  <canvas
        class="chart chart-bar"
        chart-data="data"
        chart-labels="labels"
        chart-dataset-override="colors">
      </canvas>
</body>
</html>

score 1 · Answer 2 · answered Jan 07 '18 at 12:29

I have solved this issue in the following way:

 $scope.datasetOverride =
        {
            backgroundColor: "#4E4EFF",
            borderColor: "#2E2E99"
        };


<canvas id="bar" class="chart chart-bar"
            chart-data="expenseData" chart-labels="labels" chart-series="series" chart-options="chartOptions" chart-dataset-override="datasetOverride">
</canvas>

How to set single color on each bar in angular chart js

2 Answers2