'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