Enable/Disable Zoom

Hi,

I saw that you removed EventCapture https://github.com/rrag/react-stockcharts/blob/78bbf30e4e29580aceedbc0e6fe0c8829b95b88b/docs/md/CHANGE-LOG.md

Is there any way now to enable/disable the zoom on demand? The problem being when you scroll down a page and happen to be on top of a chart then it starts zooming instead of scrolling. We want to have a button to enable chart interaction instead of having it by default.

Thanks, we ❤️ your lib 😃

[rrag]

Great here is what I am thinking

in ChartCanvas.jsx

class ChartCanvas extends Component {
    ...
    ...
    render() {
        ...
        ...
        <EventCapture
-           mouseMove={interaction}
+           mouseMove={!disableMouseMoveEvent && interaction}
-           zoom={interaction}
+           zoom={!disableMouseMoveEvent && interaction}
-           pan={interaction && !drawMode}
+           pan={!disableMouseMoveEvent && interaction && !drawMode}

            width={dimensions.width}
            height={dimensions.height}
            chartConfig={chartConfig}
            xScale={xScale}
        ...
    }
}

ChartCanvas.propTypes = {
    width: PropTypes.number.isRequired,
    height: PropTypes.number.isRequired,
    ...
    ...
+   disableMouseMoveEvent: PropTypes.bool.isRequired,
+   disablePanEvent: PropTypes.bool.isRequired,
+   disableZoomEvent: PropTypes.bool.isRequired,
    onSelect: PropTypes.func,
};

ChartCanvas.defaultProps = {
    ...
    defaultFocus: true,
    onLoadMore: noop,
    onSelect: noop,
    // ratio: 2,
+   disableMouseMoveEvent: false,
+   disablePanEvent: false,
+   disableZoomEvent: false,
};

and then when you use it in your component

handleSelect() {
    this.setState({ focus: true })
}

render() {
    ...
    var focus = this.state.focus;
    ...
    return (<ChartCanvas
        disableMouseMoveEvent={focus}
        disablePanEvent={focus}
        onSelect={this.handleSelect}
        ...
        ...>
        ...
        ...
    </ChartCanvas>

Refer CONTRIBUTING.md on how you can test your changes

Change any of the charts in https://github.com/rrag/react-stockcharts/tree/master/docs/lib/charts to test your changes.

I always use

https://github.com/rrag/react-stockcharts/blob/master/docs/lib/charts/CandleStickChartWithEdge.jsx

to play with my experiments before it becomes an example on its own

[johnreytanquinco]

Okay, I think this is the solution im looking for. https://github.com/rrag/react-stockcharts/pull/164#issuecomment-259113522

look at zoomEnabled prop in XAxis, YAxis in CandleStickChartWithZoomPan.jsx