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

swimlane / ngx-charts

:bar_chart: Declarative Charting Framework for Angular

https://swimlane.github.io/ngx-charts/

MIT License

4.29k stars 1.15k forks source link

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

Open namanpatel6 opened 5 years ago

namanpatel6 commented 5 years ago

I'm submitting a ... (check one with "x")

[ ] bug report - search github for a similar issue or PR before submitting
[x] 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

sebastiangug commented 5 years ago

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

namanpatel6 commented 5 years ago

Any update on this?

medmans commented 5 years ago

There is any update for this feature ?

KingDarBoja commented 5 years ago

@patelnaman6 Did you mean show the same data as onActivate and onDeactivate events? I mean, when you hover over any chart data (bar, line), you get some data insight but if you click on legend, you only get the label name.

medmans commented 5 years ago

@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 ?

KingDarBoja commented 5 years ago

@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 ?

Could be possible to do but would require another Input to enable/disable this feature. This could work much like activeEntries one, but instead of highlighting a serie, would be toggling the visibility.