title: Zoom and Pan in react-chartjs-2
body: <p>I have recently implemented chart display using react-chartjs-2 (<a href="https://github.com/jerairrest/react-chartjs-2" rel="nofollow noreferrer">https://github.com/jerairrest/react-chartjs-2</a>)</p>
  
  <p>I want to enable zooming and panning feature so that it will be more user-friendly in touch based screens. To implement this features, I installed <em>react-hammerjs</em> and <em>chartjs-plugin-zoom</em>. </p>
  
  <pre><code>import {Chart, Line} from 'react-chartjs-2';
  import Hammer from 'react-hammerjs';
  import zoom from 'chartjs-plugin-zoom'
  </code></pre>
  
  <p>And I registered the plugin </p>
  
  <pre><code>componentWillMount(){
      Chart.plugins.register(zoom)
  }
  </code></pre>
  
  <p>And the render method goes as follows:</p>
  
  <pre><code>render(){
      return &lt;Line data={data} options={options} /&gt;
  }
  </code></pre>
  
  <p>Pan and Zoom options:</p>
  
  <pre><code>pan:{
      enabled=true,
      mode:'x'
  },
  zoom:{
      enabled:true,
      drag:true,
      mode:'xy'
  }
  </code></pre>
  
  <p>I guess this is the correct method to implement. Unfortunately, the above implementation did not work. I will be really grateful if some of you guys already implemented Zooming and Panning using <strong>react-chartjs-2</strong> plugin, please share if how you achieved these functionalities. Or you could point out the problem in my code above. </p>