How to change bar color on a angular-chart and chart js bar graph with multiple datasets?

Question

I am able to set the colors for both datasets(estimated time vs actual time spent), with am array length size 2, that sets all the bars for each set as the designated colors.

I need to change the bar color for one of the bars in one of the sets if the value is actual time spent is higher than estimate time spent for that given date(label).

This is an angularjs application and I have imported angular-chart and chartjs. I'm tried to get used data sets(As in chartjs) for the data and set colors for each position in the area, but this doesnt display. I also tried to use chart-dataset-override attribute on the canvas tag but I do not know how to over right the specific data bar (ie. data[1][2]).

Note: all the bar items in data[0] (esitmated values) colors will not change. the bars items listed in data[1] will only change from the default color if the value is greater than the value at the same postion in the estimated time data set.

        	techid.chartseries = ['Predicted', 'Actual'];
                	techid.chartlabels = ["9/24", "9/25", "9/26","9/27", "9/28","9/29","9/30"];
                	techid.chartdata = [
                	    [65, 59, 80, 81, 56, 55, 40],
                	    [28, 48, 40, 19, 86, 27, 90]
                	  ];

                	techid.chartcolours= [
                        {
                            backgroundColor: '#D7D7D7',
                            borderColor: '#D7D7D7',
                            hoverBackgroundColor: '#D7D7D7',
                            hoverBorderColor: '#D7D7D7'
                        },
                        {
                            backgroundColor: '#0169B4',
                            borderColor: '#0169B4',
                            hoverBackgroundColor: '#0169B4',
                            hoverBorderColor: '#0169B4'
                        }
                    ];
                	
               
                	techid.chartoptions ={
                			 scales: {
                				    yAxes: [{
                				      scaleLabel: {
                				        display: true,
                				        labelString: 'Mintues'
                				      }
                				    }],
                				    xAxes: [{
                  				      scaleLabel: {
                  				        display: true,
                  				        labelString: 'Date'
                  				      }
                  				    }]
                				  }
                	};
                	
                	

<canvas id="bar" class="chart chart-bar" 
	            	 chart-data="pc.data.chartdata" 
	            	 chart-labels="pc.data.chartlabels" 
	            	 chart-series="pc.data.chartseries" 
	            	 chart-colors="pc.data.chartcolours" 
	            	 chart-options="pc.data.chartoptions">
	            	 </canvas>

I want to change the color of one of the bars for a specific date for a specific date.

I can not manipulate bar colors within a dataset when the colors array is created with 2 colors, but the data sets has a length of 7 (days in a week.)

Answer 1

I was able to solve my issue with the chart-dataset-override attribute. I updated the color setting for the array. In the example below I just overwrote the colors with red.

I plan to for loop through the array and set the values per the condition being true.

techid.datasetOverride = [
                        {
                            fill: true,
                            backgroundColor: [
                           "#D7D7D7",
                           "#D7D7D7",
                           "#D7D7D7",
                           "#D7D7D7",
                           "#D7D7D7",
                           "#D7D7D7",
                           "#D7D7D7"
                           
                            ]
                        },
                        {
                            fill: true,
                            backgroundColor: [
                            	"#0169B4",
                                "#0169B4",
                                "#0169B4",
                                "#0169B4",
                                "red",
                                "#0169B4",
                                "red"
                            ],
                            hoverBackgroundColor: [
                            	"#0169B4",
                                "#0169B4",
                                "#0169B4",
                                "#0169B4",
                                "red",
                                "#0169B4",
                                "red"
                            ],
                            borderColor: [
                            	"#0169B4",
                                "#0169B4",
                                "#0169B4",
                                "#0169B4",
                                "red",
                                "#0169B4",
                                "red"
                            ],
                            hoverBorderColor: [
                            	"#0169B4",
                                "#0169B4",
                                "#0169B4",
                                "#0169B4",
                                "red",
                                "#0169B4",
                                "red"
                            ]
                        
                        }];