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',
                }
        }
});

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',
                }
        }
});

• javascript
• charts
• chart.js

2 Answers 2

ꜰɪʀꜱᴛ

add hammer.js to your project :

<script src="http://cdnjs.cloudflare./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

Maybe you can use this plugin. See the example.

Basically you need to import and initialize it. By default, if you hold shift and drag the chart, it will pan, but you can also set a custom input trigger.