search

swimlane / ngx-charts

:bar_chart: Declarative Charting Framework for Angular
https://swimlane.github.io/ngx-charts/
MIT License
4.3k stars 1.15k forks source link

When the user clicks on a bar/slice/point/bubble, have a specified menu appear. #798

Open DonaldAlan opened 6 years ago

DonaldAlan commented 6 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 => Please do not submit support request here

I want to associate a drop-down menu with each item in a chart so that when the user clicks on a bar (or pie slice or bubble or line....) a pop-up menu appears. The menu that appears should be able to depend on the item associated with the bar (or pie slice, etc).

Custom tooltips exist (https://github.com/swimlane/ngx-charts/pull/399) but they don't do what I want.

BearandYoon commented 6 years ago

Hi @DonaldAlan I need also to show the tooltip when a user clicks the point on a heat map. Did you find the solution?

DonaldAlan commented 6 years ago

@BearandYoon I found a hacky solution that works for bar charts. I track both mouse moves (by adding (mouseMove)="onMouseMove($event)" to ngx-charts-bar-vertical) and selects (by adding (select)="onSelect($event)"). I save the x and y mouse positions from the mouse moves. The event from the select has properties name and value from the chart. If there's a menu associated with a particular bar, I render a menu (via the clarity angular package) at the x and y position. It's protected by an *ngIf that checks if there was a click and if there is a menu item. The div inside the *ngIf uses fixed css positioning to make the menu appear at the correct spot.

Maybe this is no more painful than lots of angular programming. Front-end programming is damn hard.

itMicropack commented 1 year ago

can you please demonstrate an example