CODEWITHSUNDEEP
javascriptchartschart.js
Juan Payne
Juan Payne

Reputation: 63

How to add panning to chart in chartjs?

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

Upvotes: 7

Views: 13203

Answers (2)

João Paulo
João Paulo

Reputation: 6700

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.

Upvotes: 0

ɢʀᴜɴᴛ
ɢʀᴜɴᴛ

Reputation: 32879

ꜰɪʀꜱᴛ

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

Upvotes: 11

Related Questions