chartjs-plugin-zoom: Pan is not working for Bar Chart, Zoom is however.

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!?): http://codepen.io/anon/pen/PGabEK

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 😃

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 1
Comments: 19 (2 by maintainers)

Most upvoted comments

For all those having issues with the Pan feature, I solved it on my side by manually downloading HammerJS (http://hammerjs.github.io/) 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>

Cheers

+18

MickyCar on Jan 9, 2017

@shraddha30 you should include hammerjs

+12

etimberg on Dec 7, 2016

I can confirm that you need to add a reference to hammerjs BEFORE the chartjs-plugin-zoom.js

simonl65 on Mar 6, 2017

import zoomPlugin from ‘chartjs-plugin-zoom’; constructor() { Chart.register(…registerables,zoomPlugin); }

dastoyan on May 11, 2023

both zoom and pan are extremely buggy and unresponsive unfortunately which make them unusable in any project

kitsunekyo on Jan 19, 2017

Here is an updated pen with HammerJS included 😃 http://codepen.io/anon/pen/Grpxoo

MickyCar on Jan 9, 2017

Ok, for clarity - the order should be:

chart.js
hammer.js
chartjs-plugin-zoom

This works (via CDN):

<!-- Chart.js 4.4.0 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0"></script>

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

<!-- chartjs-plugin-zoom compatible with Chart.js 4.x -->
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@1.2.0"></script>

elitwilliams on Nov 30, 2023

Pan for bar charts is working. See https://www.chartjs.org/chartjs-plugin-zoom/samples/bar.html

This page give 404

stefann01 on Mar 22, 2023

Pan for bar charts is working. See https://www.chartjs.org/chartjs-plugin-zoom/samples/bar.html

etimberg on Apr 25, 2021

The issue with pan not working persists with Chart.js v2.7.1 Including hammer.js does fix this.

b-and-p on Jan 9, 2018