'Angular ng2-Chart : Blur all barElement except clicked barelement
I want to change color of bar chart elements row wise like if I clicked on row2 then all rows barelement should be blured except row2. I have tried below code :
public barChartOptions: ChartOptions = {
responsive: true,
cutoutPercentage: 50,
elements: {
arc: {
borderWidth: 0
}
}
};
public barChartType: ChartType = 'horizontalBar';
public barChartLegend = true;
public barChartData: ChartDataSets[] = [
{ data: [1, 2, 3], label: 'Approved', stack: 'a' },
{ data: [1, 2, 3], label: 'Accepted', stack: 'a' },
{ data: [1, 2, 3], label: 'Open', stack: 'a' },
{ data: [1, 2, 3], label: 'In Progress', stack: 'a' },
];
public barChartLabels: string[] = ['P', 'R', 'B'];
// events
public chartClicked({ event, active }: { event: MouseEvent, active: {}[] }): void {
active[0].element.options.backgroundColor = "red"
}
But it doesnt works. Kindly suggest me the solution.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
