plouc
Feature (or example) request: Brush
This is a common, but often challenging, interaction. It'd be great to see how it should work in nivo.
I created a simple line chart with a brush using nivo components. I didn't create a pull request since I had to do some hacked actions to make it work.
- I had to add a new child component called
Brushinside theLinecomponent. - I added three new props to the
Linecomponent that are then passed to theBrushcomponent. Two to set the initialBrushposition, and a callback to callonBrush. - I had to modify the
SvgWrappercomponent to provide a handler to each children, that gives them access to arefof the parentsvgcomponent. I needed thisrefto convert mouse coordinates to svg coordinates.
Do you approve of these API modification, or would you do things differently. I can generate a pull request from your comments if you want.
@guzmonne this is great. Your description and examples of 'hacked actions' to make this work are helpful for understanding how to customize or enhance Nivo.
Here's what I was thinking of doing with a stacked bar chart. I've seen this before with D3 but wasn't sure how to bring it to Nivo:
I believe you could accomplish it with nivo by extending the Bar components to handle child components, or hacking it like I did with the Line component.
I published a medium article explaining how I did it, and the shortcomings of my method.
Great work @guzmonne! I've just noticed this issue while I was exposition such feature in a 'zoom' related issue. I'm thinking about the same "generic" kinda brush feature that would simply return the range (start/end) of the selected data to be able to do whatever you want with it such as this sample from highcharts: https://www.highcharts.com/demo/line-time-series
Having a generic simple capability to select an area by dragging dropping the mouse to act on it is a top feature.
@guzmonne this is great. Your description and examples of 'hacked actions' to make this work are helpful for understanding how to customize or enhance Nivo.
Here's what I was thinking of doing with a stacked bar chart. I've seen this before with D3 but wasn't sure how to bring it to Nivo:
can I get your code for bar chart with nivo-brush-zoom its too urgent for me please
@stahlmanDesign please share your code for bar charts nivo-brush-zoom. please its too urgent
Sorry, I never moved forward with this so I don't have a working solution. I am still interested if someone is able to make it work.
Hello sir, I am working on it. I will let you know when it is done.
Thanks satyam kumar
On Fri, 3 Jan 2020, 21:17 Justin Stahlman, [email protected] wrote:
Sorry, I never moved forward with this so I don't have a working solution. I am still interested if someone is able to make it work.
— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/plouc/nivo/issues/32?email_source=notifications&email_token=ALQWK4J24N5SQGF5YERJFZTQ35MXNA5CNFSM4DX5B5F2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIBNEOY#issuecomment-570610235, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALQWK4OOTEJDHVYHT66GKP3Q35MXNANCNFSM4DX5B5FQ .
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!
![stale[bot] avatar](https://avatars.githubusercontent.com/in/1724?v=4 "Published by a pub.dev verified publisher"){kind=small}
This feature would be very useful. Please prioritize when possible. Thank you!
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!
