How to use Ngx-Charts customColor function for increasing Opacity of rest of the series and highlighting selected element

1.5k Views Asked by At

I am looking to build a stacked vertical bar graph using ngx-charts in which the selected element should be highlighted and rest of the series should be blurred out so as to give an effect of filter. (Sample reference image attached). I tried passing JSON to activeEntries property as mentioned in the ngx-charts documentation but it does not work, apparently there are many requests in github on this issue which is yet to be fixed from the ngx team. So as an alternative, I am trying to use customColors property which accepts function (excerpt from ngx documentation - custom colors for the chart. Used to override a color for a specific value) , however I am unable to set the opacity of other parts in the series.

Sample reference image - before selection is done in stacked chart

Sample reference image - after selection is done in stacked chart

My code

html

 <ngx-charts-bar-vertical-stacked #stackVertical [view]="view" [scheme]="'picnic'" [results]="monthlyRevenueTrendAnalysis" [gradient]="false" [xAxis]="true" [yAxis]="true" [legend]="true" [legendPosition]="'below'" [showXAxisLabel]="false" [showYAxisLabel]="false" [xAxisLabel]="'Month/Year'[yAxisLabel]="'Revenue(in ₹ )'" [animations]="true" [showDataLabel]="true" [barPadding]="8" (select)="onStackSelect($event)" [customColors]="setCustomColors($event)"> 

Component

setCustomColors(data) {
const a = data.name;
const b= data.series
let result: any[] = [];
for (let i = 0; i < this.monthlyRevenueTrendAnalysis.length; i++) {
   if (this.monthlyRevenueTrendAnalysis[i].name ! = a) {
      result.push({"name": this.monthlyRevenueTrendAnalysis[i].name,"value": "#ff0000"});  //instead of color how can I increase opacity
   }
   else{
      result.push({"name": this.monthlyRevenueTrendAnalysis[i].name,"value": "#33cc33"});  // instead of color how can I highlight the selected element
   }
}
return result; }

EDIT : I have tried applying the same to Pie Chart and it is overriding the default colors on load rather than applying the color on click of a slice in Pie Please find the stackblitz link for the same

https://stackblitz.com/edit/angular-ivy-291naj?file=src%2Fapp%2Fapp.component.ts

0

There are 0 best solutions below