ngx-charts : On click pie chart slice, clicked slice should become active

Question

I am using ngx-chart 5.3.1 & angular 4.1.1. I am tying to highlight a particular slice in the pie chart when click.

On page load, I have given static array

this.activeEntries = [{"name" : "users" , value:4}];

It is highlighting the particular slice properly when the page loads. When clicking a slice of the piechart, I tried to set the activeEntries not highlighting particular slice of pie chart. I need to highlight the particular clicked slice.

component

export class PieChartComponent implements OnInit {

  @Input() data: SingleChartData[] = this.data ? this.data : [];

  @Input() chartInfo : any;


  private pieChartInfo : PieChart;
  private activeEntries : any[] = [{name:'users',value:4}];

  constructor() { }

  ngOnInit() {
    console.log(this.activeEntries);
    this.chartInfo = this.chartInfo === undefined ? {} : this.chartInfo;
    this.pieChartInfo = new PieChart(this.chartInfo);
  }

  onSelect(event) {
    this.activeEntries = [];
    this.activeEntries.push(event);
  }

template

<ngx-charts-pie-chart [scheme]="pieChartInfo.colorScheme" 
  [results]="data" 
  [legend]="pieChartInfo.showLegend" 
  [explodeSlices]="pieChartInfo.explodeSlices" 
  [labels]="pieChartInfo.showLabels" 
  [doughnut]="pieChartInfo.doughnut" 
  [gradient]="pieChartInfo.gradient" 
  (select)="onSelect($event)" 
  [view]="pieChartInfo.view"  
  [activeEntries]="activeEntries" >
</ngx-charts-pie-chart>

Please post the code snippets you are using, or provide a plunker example [here's a template to get started](https://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5?p=catalogue). You can read more about [how to ask a question here](https://stackoverflow.com/help/how-to-ask) :) — 0mpurdy, Jul 29 '17 at 19:32
I haven't used `ngx-chart` however you may want to check using `console.log` that the `event` in `onSelect` is in the correct format. It may also be related to https://stackoverflow.com/a/45311911/6894075 although I'm not sure — 0mpurdy, Jul 29 '17 at 19:56
["name" : "xxx" , value:4] is not same thing as [{name:'mani',value:4}]; check the format — Vega, Jul 29 '17 at 20:13
[{name:'mani',value:4}] is the right format. i have mentioned wrongly first time. i have changed the question also same — manisankar, Jul 30 '17 at 05:38
@0mpurdy it is coming as object. i am updating as activeEntries array. problem is, it is not updating in Dom — manisankar, Jul 30 '17 at 07:06
for example key added. now i updated with origin key name question as well. — manisankar, Jul 31 '17 at 09:42
Now i found that, while on click activeEntries get updated. while mouse leave activeEntries became empty. — manisankar, Aug 09 '17 at 18:07

score 4 · Answer 1 · answered Apr 03 '18 at 08:16

What i can see here is that you dont trigger change detection after adding active entry.

onSelect(event) {
  this.activeEntries = [];
  this.activeEntries.push(event);
}

this.activeEntries.push() doesnt trigger change detection because the reference is the same u should try:

onSelect(event) {
  this.activeEntries = [{...event}];
}

score 3 · Answer 2 · answered Jul 18 '18 at 08:52

In my case I had the task to make the slices of the pie chart clickable so that they are hyperlinks. I know I may be down voted because this is not exactly what the OP is asking, but this is very similar to his problem and I struggled with this for an hour.

I just want to save somebody's time if he/she - like me wants the piechart slices to be hyperlinks and he had come to this place like me.

In the bla.component.html

           <ngx-charts-pie-chart
            [scheme]="pieChartColorScheme"
            [results]="MyDataVariable" 
            [legend]="false"
            [labels]="false"
            [doughnut]="true"
            [gradient]="true"
            (select)="onPieSliceSelect($event)" >   // <-- this is the important line in the template
          </ngx-charts-pie-chart>

And in bla.component.ts

// When user clicks on a specific slice on the pie chart
onPieSliceSelect(event){   
   // Here is the interesting part
   this.router.navigate(['/myRouteInAppRouting'], {queryParams: {myGetParam: event.name}});

   // Or something like that
   // if (event.name === 'smthing1') {
   //   this.router.navigate(['/myRouteInAppRouting'], {queryParams: {myGetParam: 'running'});
   // } else if (event.name === 'smthing2') {
   //   ... 
   // } 
}

And then in your other component that you are redirecting to:

ngOnInit(): void {
    this.route.queryParams.subscribe(params => {
      let myGetParams: string = params['myGetParam'];
      // do something with your get params
      // ....
     }
}

ngx-charts : On click pie chart slice, clicked slice should become active

2 Answers2