3

I'm currently playing with ESnet's react timeseries charting components, with the specific goal of allowing a user to zoom into a displayed chart, as in their currency example.

According to their documentation and to the best of my understanding of the example's source code, it should be enough, if one is rendering a chart like this:

<ChartContainer timeRange={series.range()}>
   ...
</ChartContainer>

To add enablePanZoom={true} to the props to enable zooming. E.g:

<ChartContainer timeRange={series.range()} enablePanZoom={true}>
   ...
</ChartContainer>

However, this is not working and I cannot understand why. I guess something from the doc or the example eludes me:

  • running the zoomable examples locally works as expected
  • running the non-zoomable example with the zoom flag enabled does not work

Hence, the question: How to make a react-timeseries-charts chart zoomable?

edit: Turns out the answer was obvious: one must make use of onTimeRangeChanged and update the state, otherwise, well, poof...

Shastick
  • 1,218
  • 1
  • 12
  • 29

1 Answers1

3

On their example, they use onTimeRangeChanged={this.handleTimeRangeChange}

if you look in the example source code, at https://github.com/esnet/react-timeseries-charts/blob/master/src/website/packages/charts/examples/currency/Index.js

they define the function as 

handleTimeRangeChange = timerange => {
    this.setState({ timerange });
};

Have you tried that?

Valentin Gazzola
  • 58
  • 3
  • 1
    Indeed, the range must be tracked in the state and updated via that callback. The documentation left me feeling that this was not necessary :( – Shastick Aug 14 '18 at 11:25