How to add panning to chart in chartjs?

Question

I have created a bar chart with chartjs. I am also using chartjs-plugin-zoom. I have tried several ways but can’t find a way to add panning functionality to chart. Does anyone know how can I add this?

Here is my code:

var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
                labels: [1, 2, 3, 4, 5...],
                datasets: [{
                        label: '# of Votes',
                        data: [12, 19, 3, 5, 2...]
                }]
        },
        options: {
                zoom: {
                        enabled: true,
                        mode: 'x',
                }
        }
});

Answer 1

ꜰɪʀꜱᴛ

add hammer.js to your project :

<script src="http://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>

ꜱᴇᴄᴏɴᴅ

enable pan option for your chart, like so :

options: {
   pan: {
      enabled: true,
      mode: 'x',
   },
   ...
}

see demo on jsFiddle