Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Pan is not working for Bar Chart, Zoom is however.

See original GitHub issue

My barchart uses the chartjs-zoom plugin, however only the zoom functionality works.

`$(document).ready(function () { $.getJSON( “@Url.Action(“GetData”)”, function (data) { BarChart(data); }); });

            function BarChart(data) {
                var barChartData = {
                    labels: data.Month,
                    datasets: [
                            label: 'Weight (kg)',
                            fillColor: "rgba(220,220,220,0.5)",
                            backgroundColor: "rgba(46, 44, 211, 0.7)",
                            highlightFill: "rgba(220,220,220,0.75)",
                            highlightStroke: "rgba(220,220,220,1)",
                            data: data.Weight
                            label: 'Steps',
                            fillColor: "rgba(0,0,0,0.5)",
                            backgroundColor: "rgba(215, 44, 44, 0.7)",
                            highlightFill: "rgba(0,0,0,0.5)",
                            highlightStroke: "rgba(0,0,0,0.5)",
                            data: data.Steps

                var ctx = document.getElementById("barchart").getContext("2d");
                window.myBar =new Chart(ctx, {
                    type: 'bar',
                    data: barChartData,
                    options: {
                        pan: {
                            enabled: true,
                            mode: 'xy',
                            speed: 10,
                            threshold: 10
                        zoom: {
                            enabled: true,
                            mode: 'xy',
                            limits: {
                                max: 1000,
                                min: 0.5
                        responsive: true,
                        tooltips: {
                            callbacks: {
                                afterLabel: function (e) { return "Owner: " + data.User[e.index] }
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true

I have included: Script.Require(“ChartJS”); Script.Require(“ChartJSZoom”); Script.Require(“Hammer”); and these requires contain the mins and regular packages for ChartJS, ChartJSZoom and Hammer.

The barchart is in the canvas: <div id="container" style="width:1100px; overflow-x:scroll;"> <canvas id="barchart"></canvas> </div> Some insight into why this isn’t working would be great, I have tried to use the codepen example as a starting point (however the pan doesn’t work on that either for me!?):

The documentation is unfortunately unable to help with this issue also.

Thanks to anyone who can help, I would just like basic horizontal panning, XY panning would just be a bonus 😃

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:14 (2 by maintainers)

github_iconTop GitHub Comments

MickyCarcommented, Jan 9, 2017

For all those having issues with the Pan feature, I solved it on my side by manually downloading HammerJS ( and adding a reference to it BEFORE the chartjs-plugin-zoom.js reference.

<script src="hammer.min.js"></script>
<script src="chartjs-plugin-zoom.js"></script>


etimbergcommented, Dec 7, 2016

@shraddha30 you should include hammerjs

Read more comments on GitHub >

github_iconTop Results From Across the Web

Why is pan (and zoom) not working on my Chart.js graph?
Try to use the latest version of ChartJS, at the moment 3.7.1. If your downloaded scripts don't load, it could be a bug...
Read more >
Pan and Zoom in jQuery Bar Charts Widget Demo | Kendo UI ...
The pan-and-zoom feature allow you to navigate through, and zoom in and zoom out the jQuery Bar Chart. You can enable the pan...
Read more >
Zooming & Panning in CanvasJS HTML5 & JavaScript Charts
Zooming and Panning are useful when plotting a chart with large amount data. This tutorial teaches you the basics of using them.
Read more >
Victory | VictoryZoomContainer
VictoryZoomContainer provides pan and zoom behavior for any Victory component that works with an ... However, the component that uses it must be...
Read more >
ApexCharts card - A highly customizable graph card
Can you tell me what I did wrong with the chart zoom/pan options above? ... This however, returns no data (showing loading on...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found