How to change bar color and legends in ColumnChart

Question

I am using Google Chart to display Column Chart for 2 things :

1) Success

2) Failed

For Success : Color = Green

For Failed : Color = Red

But problem is ColumnChart always display bar in blue color and also i want legends as :

Success
Failed

But it displays Legends as "values" as shown below :

Code :

 angular.module("google-chart-sample", ["googlechart"])
.controller("GenericChartCtrl", function ($scope) {
    var data = { "data": { "graphResponse": { "cols": [{ "label": "Types", "type": "string" }, { "label": "values", "type": "number" }], "rows": [{ "c": [{ "v": "success" }, { "v": 11 }] }, { "c": [{ "v": "failed" }, { "v": 0 }] }] } } };
    $scope.myChartObject = {};
    $scope.myChartObject.type = "ColumnChart";
    $scope.myChartObject.data = data.data.graphResponse;
    $scope.myChartObject.options = {
        slices: {
            0: { color: '#50ce68' },
            1: { color: '#ff7b7b' },
        },
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.18/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-chart/1.0.0-beta.1/ng-google-chart.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
<ul ng-app="google-chart-sample" ng-controller="GenericChartCtrl">
    <div google-chart chart="myChartObject" style="height:600px; width:100%;"></div>
    </ul>

I want Success bar as Green and Failed as Red and i also want 2 Legends(Success -Green and Failed-Red)

I will appreciate any help :)

Naga Sai A · Answer 1 · 2018-04-20T15:45:28.810

To achieve expected result, use below option of using role and give color green for success and red for failed

{"role": "style", "type": "string"}

  var data = { "data": 
                { "graphResponse": 
                 { "cols": [{ "label": "Types", "type": "string" }, 
                            { "label": "values", "type": "number" },
                            {"role": "style", "type": "string"}], 
                  "rows": [{ "c": [{ "v": "success" }, { "v": 11 },{"v":"green"}] }, 
                           { "c": [{ "v": "failed" }, { "v": 0 },{"v":"red"}] }] 
                 } } };

Issue with legend is that it takes the label:"values" as legend by default and one way to customize is to make legend:none and customize with below code

HTML:

<div class="legend">
    <div ng-repeat="item in myChartObject.data.rows">
    <div class="{{item.c[2].v}}"></div>{{item.c[0].v}}
    </div>
  </div>

CSS:

 .legend{
  position:absolute;
  right:100px;
  top:30px;
}

.red{
  background:red;
  width:30px;
  height:10px;
  display:inline-block;
}

.green{
  background:green;
  width:30px;
  height:10px;
  display:inline-block;
}

JS: In JS add legend :none to chart options

$scope.myChartObject.options = {
        slices: {
            0: { color: '#50ce68' },
            1: { color: '#ff7b7b' },
        },
       legend:'none'
    };

updated code sample for reference - https://codepen.io/nagasai/pen/qYdpaE

This is nice and upvoted for your kind efforts towards helping me but still there is problem of Legend.Is it possible to show legend like Success and Failed instead of values? — I Love Stackoverflow, Apr 20 '18 at 14:46
@User, updated my answer and codepen, legend by default uses column label , in this case "values" , one optiosn is to customize the legend — Naga Sai A, Apr 20 '18 at 15:47
When i hover on success bar,it is showing as success/failed on bar — I Love Stackoverflow, Apr 21 '18 at 06:05
@User, for testing legend , i have changed label values to success/failed, I have updated codepen, hope it works now :) — Naga Sai A, Apr 21 '18 at 07:10

Chinmoy Samanta · Answer 2 · 2018-04-27T09:35:27.060

You can achieve the data plot selecting functionality by mouse over in legend using setSelection method of google chart. To use this method, at first get chart instance on agc-on-ready directive. Then on mouse over handler of legend, call setSelection method of chart instance.

 $scope.highLight = function(arg){
     if(arg == "red"){
    ChartInstance.setSelection([{row:1,column:1}])
     }
     if(arg=="green"){
       ChartInstance.setSelection([{row:0,column:1}])
     }
   };

Code is given in this link.

How to change bar color and legends in ColumnChart

2 Answers2