0

I am working with angular 6 and ngx-chart and I need on clicking the legend item, the corresponding data from the chart should show/hide

The ng-chart library does have this functionality and my client requests it.

Edit01:

I have almost everything working but I have a problem when applying axisFormat. once I remove an item from the legend it reformats the x-axis and doesn't literally put how the data comes without applying the AxisFormat. Any solution?

onSelect (event) {
  let temp = JSON.parse(JSON.stringify(this.multi));
  this.sourceData = JSON.parse(JSON.stringify(this.multi2));

  if (this.isDataShown(event)) {    
      //Hide it
      temp.some(pie => {
        const pie2 = pie.name[0] + ',' + pie.name[1];
        // console.log('pie', pie[0], event, pie2);

          if (pie2 === event) {
            pie.series = [];
              return true;
          }
      });
  } else {
      //Show it back
      console.log('Entramos en el ELSE');
      const pieToAdd = this.sourceData.filter(pie => {
        const pie2 = pie.name[0] + ',' + pie.name[1];

          return pie2 === event;
      });
      temp.some(pie => {
        const pie2 = pie.name[0] + ',' + pie.name[1];

          if (pie2 === event) {
              pie.series = pieToAdd[0].series;
              return true;
          }
      });
  }
  console.log('log temp: ' + JSON.stringify(temp));
  this.multi = temp;
  // this.axisFormat(this.multi);
}

isDataShown = (name) => {
  const selectedPie = this.multi.filter(pie => {
    const pie2 = pie.name[0] + ',' + pie.name[1];
      return pie2 === name && pie.series[0] !== undefined;
  });
  return selectedPie && selectedPie.length > 0;
}


axisFormat(val) {
  const options = { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' };
  // Esto funciona pero al hacer timeline no pone horas val.toLocaleDateString("es-ES", options);
  console.log('val:', val.toLocaleDateString('es-ES', options));

  return val.toLocaleDateString('es-ES', options);
}

HTML

<ngx-charts-line-chart [view]="" [scheme]="colorScheme" [results]="multi" [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" [legend]="showLegend" legendPosition="'below'" [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel"
        [xAxisLabel]="xAxisLabel" [yAxisLabel]="yAxisLabel" [autoScale]="autoScale" [timeline]="timeline" [roundDomains]="true" [animations]="animations"  (select)="onSelect($event)" [xAxisTickFormatting]="axisFormat">

        <ng-template #seriesTooltipTemplate let-items="model">
            <p>{{items[0].name | date:'medium'}}</p>
            <ul>
                <li *ngFor="let item of items">
                    {{item.series}}: {{item.value | number}}
                </li>
            </ul>
        </ng-template>
   
    </ngx-charts-line-chart>

EDIT

Hello, I have already managed to solve the problem adding an example in case it can help other people.

https://stackblitz.com/edit/click-lengd-ngx-charts

Manolait
  • 353
  • 2
  • 11

2 Answers2

2

This is how we can achieve it for ngx-pie-chart. With the help of select event, capture it, identify the item from the data and make it zero. Next, on the next click, add the value back from the source copy. See it working here ngx-pie-chart label-filter

onSelect (event) {
    let temp = JSON.parse(JSON.stringify(this.single));
    if (this.isDataShown(event)) {
        //Hide it
        temp.some(pie => {
            if (pie.name === event) {
                pie.value = 0;
                return true;
            }
        });
    } else {
        //Show it back
        const pieToAdd = this.sourceData.filter(pie => {
            return pie.name === event;
        });
        temp.some(pie => {
            if (pie.name === event) {
                pie.value = pieToAdd[0].value;
                return true;
            }
        });
    }
    this.single = temp;
}

isDataShown = (name) => {
    const selectedPie = this.single.filter(pie => {
        return pie.name === name && pie.value !== 0;
    });
    return selectedPie && selectedPie.length > 0;
}
Azher
  • 69
  • 1
  • 6
  • WIth this inspiration I have achieved this with the multi-bar-chart: https://stackblitz.com/edit/multi-bar-chart-click-legend-hide-show-serie – Lenka Weiss Jun 25 '20 at 13:57
  • Hello, first of all thanks for the help. I am working with the line chart. I already have almost everything working but now I have a problem with the AXIS X. It does not take the format. Only the first time the screen is opened. when I press some element of the legend it is not capable of transforming the data. I edit the post to add what I have. – Manolait Jun 26 '20 at 17:08
  • @Manolait Can you please create a stackblitz or a plunkr. It will be helpful. – Azher Jun 27 '20 at 18:35
  • Hello, I have already managed to solve the problem add an example https://stackblitz.com/edit/click-lengd-ngx-charts Would you know how to highlight the legend when clicking on it? – Manolait Jul 02 '20 at 09:36
1

I am kinda new to Stack Overflow, but i think you should specify your answer more and show us what you already tried. Nevertheless I will try to help you.

You should give your chart a (select)="onClickFunction ($event)" in HTML. In your TS you then call the onClickFunction(event). I always start with giving it a console.log(event) to see what i get from clicking on the legend.

After clicking on the legend, you get the label of the element you clicked on. You can then search for this label in your data and remove this data out of the array you use for filling the chart.

If you provide a stackblitz or plunker wtih your code, I will gladly show you how to do it.

jalei005
  • 170
  • 1
  • 7