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 😃

[MickyCar]

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

[etimberg]

@shraddha30 you should include hammerjs