How to have solid colored bars in angular-chart bar chart

Question

I\'m using angular-chart (based on chart.js) to create some bar charts and am having trouble getting the bar styling I want. I want the bars to be solid colors like this:

Answer 1

I am using chart.js version 2 with angular wrapper, Doing the following edits helped me.

Changes - color takes argument in the form of rgba(R,G,B,alpha)
alpha = 1 : solid color, alpha = 0 : Transparent color

In HTML : <canvas id="bar" class="chart chart-bar" chart-data="barData" chart-labels="filter" chart-series="barLabels" chart-options="baroptions" chart-colors="setColors" > </canvas>

In my Controller class, i defined setColors as follows :

In controller.js : $scope.setColors = [{backgroundColor:'rgba(249,166,92,1)',pointBackgroundColor:'rgba(249,166,92,1),pointHoverBackgroundColor:'rgba(249,166,92,1)',borderColor:'rgba(249,166,92,1)',pointBorderColor:'rgba(249,166,92,1)',pointHoverBorderColor:'rgba(249,166,92,1)'}, {backgroundColor:'rgba(90,155,211,1)',pointBackgroundColor:'rgba(90,155,211,1)',pointHoverBackgroundColor:'rgba(90,155,211,1)',borderColor:'rgba(90,155,211,1)',pointBorderColor:'rgba(90,155,211,1)',pointHoverBorderColor:'rgba(90,155,211,1)'}, {backgroundColor:'rgba(120,194,107,1)',pointBackgroundColor:'rgba(120,194,107,1)',pointHoverBackgroundColor:'rgba(120,194,107,1)',borderColor:'rgba(120,194,107,1)',pointBorderColor:'rgba(120,194,107,1)',pointHoverBorderColor:'rgba(120,194,107,1)'}]

Answer 2

Just use RGBA where A is Opacity and set it to 1 which defines the solid color. Ex: backgroundColor: [ 'rgba(255, 99, 132, 1)']

Answer 3

You can use chart-dataset-override="datasetOverride"

HTML

 <div ng-controller="BarCtrl">
    <canvas id="bar" class="chart chart-bar" 
    chart-data="data" 
    chart-labels="labels" 
    chart-series="series" 
    chart-dataset-override="datasetOverride"></canvas>
  </div>

Controller

  ctrl.datasetOverride = [{
        fill: true,
        backgroundColor: [
          "#ED402A",
          "#36A2EB",
          "#FFCE56"
        ]
      }, {
        fill: true,
        backgroundColor: [
          "#F0AB05",
          "#36A2EB",
          "#FFCE56"
        ]
      }, {
        fill: true,
        backgroundColor: [
          "#A0B421",
          "#36A2EB",
          "#FFCE56"
        ]
      }, {
        fill: true,
        backgroundColor: [
          "#00A39F",
          "#36A2EB",
          "#FFCE56"
        ]
      },
    ];

DEMO

Answer 4

Here are the codes that I have made to make a bar chart with custom settings. Use this attribute chart-dataset-override="datasetOverride" in the canvas html tag:

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


var setGraphDate = function () {
    var xData = [];
    var yData = [];
    $scope.Data.ExpenseRecords.forEach(function (g) {
        yData.push(g.PercentOfCompletion);
        xData.push(g.TspShortName);
    });
    $scope.datasetOverride =
    {
        backgroundColor: "#4E4EFF",
        borderColor: "#2E2E99"
    };
    $scope.labels = xData;
    $scope.expenseData = yData;
    $scope.series = ['Expense Graph'];
   // more options
    $scope.chartOptions = {

        legend: {
            display: false
        },

        },
        title: {
            display: true,
            text: 'TSP Burn Rate'
        },
        events: false,
        tooltips: {
            enabled: false
        },
        hover: {
            animationDuration: 0
        }
};