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