title: ChartJS line chart drag and zoom
body: <p>Is it possible to add drag and zoom on ChartJS? I would like to do something similar like <a href="https://jsfiddle.net/4w626v2s/2/" rel="nofollow noreferrer">here</a>.</p>
  
  <p>Here is how I draw my line chart:</p>
  
  <pre><code>&lt;canvas class="square_margin_less" id="myChart" width="100" height="30" &gt; &lt;/canvas&gt;
  &lt;script&gt;
  new Chart(document.getElementById("myChart").getContext('2d'),
  {
      type: 'line',
      data: {
          labels: {{ data.labels|safe }},
          datasets:
          [{
              label: 'x',
              data: {{ data.x }},
              borderColor: 'rgba(233,105,118,1)',
          },
          {
              label: 'y',
              data: {{ data.y }},
              borderColor: 'rgba(96,143,239,1)'
          },
          {
              label: 'z',
              data: {{ data.z }},
              borderColor: 'rgba(144,247,136,1)'
          }]
      },
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>There is some way of personalizing this? </p>