Feature (or example) request: Zoom

[jfsiii]

This is a common, but often challenging, interaction. It'd be great to see how it should work in nivo.

[plouc]

I don't think we should create a global issue for it as it really depends on the type of chart used. For example I don't think Chord/Sankey diagrams should be zoomable.

There's just the bubble component for now which support zooming, but the zooming method is tied to this chart, I was planing to add it to the TreeMap, but because TreeMap does not leave enough room for mouse interaction on parent nodes, I must think of a different approach.

[MarcMagnin]

Hi, Thanks a lot for this sexy library! I've been using highcharts and echarts and I'm looking at a more efficient rendering library. Also I need some feature to be able to select a time range: https://www.highcharts.com/demo/line-time-series. The zooming per say isn't what I'm looking for, it's more the capability to select an area and get the callback with the timerange to do whatever I want with it (for instance refresh the chart with the new time range, triggering a server call). Do you have the events interactions in place for that such as mousedown/up and provide a timerange or x coordinates that we can correlate with the time axis? Many thanks!

[plouc]

@MarcMagnin I think you're referring to Brushing, it's not supported yet, but I'd like to have it available.

[MarcMagnin]

Ok sounds good, as long as it's on the roadmap.

[plouc]

@MarcMagnin feel free to contribute if you need this feature.

[MarcMagnin]

I'd love but no time for it now now. Hopefully soon!

[nypinstripes]

@plouc @MarcMagnin was just curious if there was anything recent update-wise on this thread, am considering & proposing nivo strongly for adoption within my team at work but the brush & zoom on Line components seems to be a hard requirement for our stakeholders. Was thinking of giving @guzmonne's https://github.com/guzmonne/nivo-with-brush prototype a go if there's not an expectation for this to roll out in 2019. I really love what ive seen and used so far with nivo so i'm hoping these avenues will pan out.

[plouc]

@nypinstripes, I started something a while ago, but it's more a prototype, I've created a PR with it, but unfortunately I already have several ongoing features and not much time for now :/

[ayepRahman]

Hi @plouc any estimated timeline for this, Would love to have this in nivo.

[thomasmarr]

@plouc I came here to check if brushing was available, but notice you mentioned you don't think sankey diagrams should be zoomable. I just thought you might be interested to see this if you haven't already come across it: wikibudgets

[gauravshah786]

@plouc Is there any plan to add zoom support for GeoMap and Choropleth ?

[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!

[sattuchin]

bump

[Dzheky]

bump

[aaroncsolomon]

bump for zoomable scatterplots

[davidnmora]

Would really love zoom on these x-y type plots:

• scatter
• line

[NeCkEr]

+1 for zoom 🙏

[asherccohen]

Bump

[paritoshromy]

bump

[martinratinaud]

+1 for zoom also

[nico-hernandez]

Hi lovely people! Are there any news about zoom and range selector, for time series chart mainly?

[nico-hernandez]

bump

[ashic]

Would be really useful to get zoom for scatterplots and line charts.

[natasha17-spec]

I would like to add zoom to various types of diagrams, especially linear

[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!

[philipp-sapronov]

bump

[ChuckJonas]

bump

[shehi]

bump indeed

[nadineshmo]

hi @plouc, is there any estimated timeline for zoom + pan on scatter plots? Or if someone else were to contribute, do you have an estimate of how long you think this work would take? Thanks!

[AdrianSkib]

Bump

[gygabyte017]

bump

[arefLA]

bump

[danielsantiago1002]

bump

[MilaSinica]

bump

[iamgururaj]

bump

[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!

[Saroopashree]

bump

[manfye]

bump

[SenouLynn]

bumparooney

[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!

[chartexpro]

bump

[aamir-mns]

bump

[Tristan-0D]

b u m p

[harticode]

bump for zoomable scatterplots

[GGrassiant]

I don't know if it helps anyone but in the meantime, for zooming on scatterplots similarly to stateOfJS, the workaround through context and a dynamic range is pretty neat: https://github.com/Devographics/Monorepo/blob/main/results/src/core/charts/toolsScatterplot/ToolsScatterplotChart/state.ts

[plouc]

What I did for stateOfJS is quite specific though, as we use custom components, but yes, using dynamic range is the way to achieve zoom. Good idea to share this approach @GGrassiant.

[harticode]

a work around this is to use a dynamic range for scales it kinda works for me, and for the listener, I use onWheel on the div that wraps the graph(it can be done also with an input slide...), check my implementation here, hope this helps till we have a zoom feature. https://stackblitz.com/edit/react-6rycey?file=src/components/scatter/scatter.js

[plouc]

That's very nice @harticode!

[plouc]

Although the way nivo handles the identity of each point doesn't play well with animations in this case 😅