Support for events (onClick etc.)

[jurajhrib]

I noticed there is an onClick prop in chart component, but it's probably not used for anything right now. Do you plan on implementing some basic events with access to data of clicked element? I am currently trying to implement bar chart with onClick event (to filter in hourly data). It should also have formatted tooltip. I really like your library, it has beautiful visuals and very useful options, but I sadly need onclick for my use case.

[plouc]

Hi @jurajhrib , Yes, I'm planning to add support for this kind of use case. As you noticed there are already some but not used, in fact I already have all the necessary bits on many charts as I use it for the tooltips. Which component are you using?

[jurajhrib]

I am mostly interested in Bar charts (grouped and regular). My chart should have clickable bars which trigger filtering in list when clicked, also the bar should be able to change colour or other property when it's selected. But that's not as important as the onclick itself.

[plouc]

@jurajhrib I've added onClick support for Bar & Bubble charts, available in nivo@0.26.1, the demo has not been updated accordingly though

[plouc]

in nivo@0.27.0, you'll also have the event as second argument (onClick(node, event)), useful in your case if you wish to position something according to it.

[debovis]

@plouc Thanks for updating the library to support more events. I am interested in a onClick event for HeatMap component, as well as being able to edit the information shown with tooltip. Can you point me on how to use onClick if it is already there? Thanks

[plouc]

Added onClick support on TreeMap components, @debovis should be available soon enough on HeatMap, for the tooltip, I plan to allow customization, but don't know when I'll have the time to add it, however feel free to contribute if it's a requirement for your current usage ;)

[chrislombaard]

Hi @plouc, i'm using the Heatmap for a project our company is working on. Have you had a chance to add an onClick event for the Heatmap yet?

[orar]

And also Sunburst please? In a moment i thought onClick, onHover(onMouseEnter, onMouseLeave) could be universal functions across all components.

[chrislombaard]

@plouc Re: above ^ please

[v4lenz]

I would also love to have support for onClick on slices of the Pie component

[debovis]

@vdidonato Check out http://recharts.org/en-US/examples/CustomActiveShapePieChart I had a great experience with implementing Recharts.

[v4lenz]

You mean: use a different library? Does that support onClick events on the slices?

[debovis]

@vdidonato Yes, great examples too.

[v4lenz]

I'll give a try, thanks!

[raghunayyar]

I would love onClick on the heatmaps to get more info when I click on it. ^_^

[plouc]

@raghunayyar which info?

[plouc]

@vdidonato onClick support has been added to Pie chart.

[raghunayyar]

As an example, I am displaying data for some entities on the heatmap. I would like to have an ability to query them by id when I click on them individually.

[plouc]

@raghunayyar, thank you, I'm currently adding support for onClick events to heatmap components.

[plouc]

@raghunayyar onClick available for @nivo/heatmap package for all charts, please use >=0.37.0

[plouc]

the website documentation has also been updated accordingly

[raghunayyar]

<3

[eliascotto]

Are you going to adding support for onClick also on the Line chart?

[Panczo]

onClick function could be awesome for Line chart as well. Hope @plouc will have some time to implement it.

[rpearce]

• [ ] ability to have onMouseEnter and onMouseLeave for Line would be super sweet, as well

Really some API to pass any events you want to listen for seems like the most across-the-boards-friendly way?

[plouc]

@rpearce each component is quite specific so it's not that simple to add the same event support for every component, also the canvas implementation is challenging regarding events, for simple shapes it's pretty easy, but for more complex ones (like sankey or chord links), it's really challenging.

[rudyStrikes]

Hi @plouc , can you please update if there is a plan to support onclick action for chord?

[plouc]

@rudyStrikes, you now have support for various events on the Chord component => https://github.com/plouc/nivo/pull/526

[el1f]

Hi @plouc, is the onHover mouse event for the Pie in the roadmap? I'm deep in love with this project and could use that event on the Pie slices to trigger some callbacks for a component I'm building.

[subash774]

@jurajhrib I'm trying to do the same thing as you, not the most experienced with react, I was wondering how did you implement the filter option onclick on react?

[jurajhrib]

@subash774 Hi, I implemented this almost 2 years ago. But it should be pretty straightforward. The chart component allows you to pass an onClick prop, which accepts either a handler defined somewhere in the upper scope (on class component or as a function saved into a constant) or anonymous function.

Something like this:

<BarChart onClick={(data, event) => somePredefinedFunction(data)} />

Let's say you want the most naive solution - you would store the filters in your parent component state and somePredefinedFunction would be actually this.setState({ filter: data.id }). Then, somewhere in the same component, you would just this.state.filter as value for the data filtering. This is really simple solution and it does not scale nicely, but for simple app, it is okay.

I am not sure, whether you're familiar with hooks api in React, but it makes writing state updates really easy. Basically you can either update some special context (which holds the info about current filters) or you can just update local state on this component. Or it can trigger an api call, which then updates the state, when it returns new data. It mostly depends on your use-case.

[Novizh]

Hi, @plouc ! Thank you for creating this awesome library. This is my second project using nivo chart, and I would like to know if there's a way to implement onClick attribute on responsive bar axis top legends?

[jazzgil]

Hi @plouc and thanks for this comprehensive and fantastic library. After trying several other libraries in the last 2 weeks (Chartjs, react-vis, recharts, Victory) and running into road-blocks with them, I've finally tried Nivo and fell in love. Configuration is elegant (especially with the interactive configuration website, and graphics look good out of the box as well. Thanks!

Sorry for the long intro ;)

I'm using a ResponsiveStream, and I need onClick and also onHover (or enter/leave) would be nice. I noticed that these callbacks are available in ResponsiveLine, but I get better looking results with ResponsiveStream (I can describe the differences if this is interesting). Also, it is important that these mouse interactions will still allow me to show the standard tooltip.

Here's how it looks now...

Much appreciated! :)

[jazzgil]

Added implementation of this in Pull Request: https://github.com/plouc/nivo/pull/893

[altrang]

Hello guys do you know if onClick is available on sunburst?

[wyze]

Hi @altrang, it is currently not supported.

[altrang]

Hi @altrang, it is currently not supported.

@wyze Thanks for your answer :) Do you know if it will be ? If so when ? (I told my boss it will soon hahah)

[wyze]

I am currently converting that chart to TypeScript and will include the change. If someone wants to submit a PR sooner, I'd be happy to accept it.

[headfox23]

Any plan for the onClick to work with enabled Slices for line chart?

[alim971]

I am currently converting that chart to TypeScript and will include the change. If someone wants to submit a PR sooner, I'd be happy to accept it.

Hi, any news about the support for onClick on Sunburst?

[headfox23]

Any plan for the onClick to work with enabled Slices for line chart?

or any update here? My users requested a "zoom" functionality similar to grafana where you select the time (mouse down event + mouse move + mouse release event)... would be cool if there would be any possible solution for such feature

[ghost]

Wondering if Sunburst will eventually be zoomable? :D

[plouc]

@CAScgutierrez, it's not in the roadmap, we're focusing on the following items for now:

• TypeScript migration
• Removing recompose in favor of React hooks
• Replacing react-motion with react-spring

[stale[bot]]

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]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

[frankiemutiso]

Does anyone have an idea how we can implement onMouseDown and onMouseUp events on nivo line chart? I'd really appreciate the help

Context: I have dates on my x-axis and I'd like to drag my mouse and select a range of dates.

[frankiemutiso]

Does anyone have an idea how we can implement onMouseDown and onMouseUp events on nivo line chart? I'd really appreciate the help

Context: I have dates on my x-axis and I'd like to drag my mouse and select a range of dates.

I found the solution here: https://codesandbox.io/s/851lp?file=/src/App.tsx:1638-1883 Thanks

[hunt3r]

Does anyone have an idea how we can implement onMouseDown and onMouseUp events on nivo line chart? I'd really appreciate the help Context: I have dates on my x-axis and I'd like to drag my mouse and select a range of dates.

I found the solution here: https://codesandbox.io/s/851lp?file=/src/App.tsx:1638-1883 Thanks

This does work, but one thing I noticed is that the slices property is not present on the CustomLayerProps, seems as though slices is a dynamic property. I had to use the ts-ignore on any slices reference. Is CustomLayerProps the correct type for this?