Hide/Show the corresponding data from the chart on legend click

I’m submitting a … (check one with “x”)

• bug report - search github for a similar issue or PR before submitting
• feature request
• support request - use StackOverflow (add the ngx-charts tag) or the gitter chat for support questions

Current behavior

A legend item on clicking does not hide/show the corresponding data from the chart

Expected behavior

On clicking the legend item, the corresponding data from the chart should show/hide

Reproduction of the problem

What is the motivation / use case for changing the behavior?

Required for projects

Please tell us about your environment:

Windows 10, Angular 7, ngxcharts 10, Chrome

• ngx-charts version: 10.0.0

• Angular version: 7.0.0

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

All

• Language: [all | TypeScript X.X | ES6/7 | ES5] Typescript

[medmans]

@KingDarBoja i think that the goal of this bug is to implement show/hide serie method, if we have two series in the same chart, we can hide one and have still one is showing. isn’t it ?

[sebastiangug]

Use Redux and when you click on legend have a function that does something like this: I have this function in my reducer:

function setActiveOffice(
  state: Reporting,
  action: ReportingActions.SetActiveOffice
) {
  if (
    state.activeOfficeSelection.some(
      (office: { name: string }) => office.name === action.office
    )
  ) {
    _.remove(state.activeOfficeSelection, function(el: { name: string }) {
      if (el.name === action.office) {
        return true;
      } else {
        return;
      }
    });
    return tassign(state);
  } else {
    state.activeOfficeSelection.push({ name: action.office });
    return tassign(state);
  }
}

Then use as with | async across all your relevant charts which display the data about the same top-level entities. This is using @ngrx/store