Can not make pan work

[otto24]

Hello, I have the following
chartjs:v3.9.1
chartjs-plugin-zoom v1.2.1
Hammer.JS - v2.0.8 - 2016-04-23
code:

<script> var ctx = document.getElementById('IngestperHour'); var graphData = [{'date': '2022-10-07 00:00', 'Ingest': '8126.21'}, {'date': '2022-10-07 06:00', 'Ingest': '3346.20'}, {'date': '2022-10-07 12:00', 'Ingest': '68.38'}, {'date': '2022-10-07 18:00', 'Ingest': '15432.58'}, {'date': '2022-10-08 00:00', 'Ingest': '9962.87'}, {'date': '2022-10-08 06:00', 'Ingest': '3804.40'}, {'date': '2022-10-08 12:00', 'Ingest': '72.48'}, {'date': '2022-10-08 18:00', 'Ingest': '18098.97'}, {'date': '2022-10-09 00:00', 'Ingest': '14837.01'}, {'date': '2022-10-09 06:00', 'Ingest': '3358.09'}, {'date': '2022-10-09 12:00', 'Ingest': '51.74'}, {'date': '2022-10-09 18:00', 'Ingest': '12835.40'}, {'date': '2022-10-10 00:00', 'Ingest': '4878.17'}, {'date': '2022-10-10 06:00', 'Ingest': '3577.21'}, {'date': '2022-10-10 12:00', 'Ingest': '52.87'}, {'date': '2022-10-10 18:00', 'Ingest': '12687.77'}, {'date': '2022-10-11 00:00', 'Ingest': '8170.81'}, {'date': '2022-10-11 06:00', 'Ingest': '3482.77'}, {'date': '2022-10-11 12:00', 'Ingest': '40.75'}, {'date': '2022-10-11 18:00', 'Ingest': '11486.58'}, {'date': '2022-10-12 00:00', 'Ingest': '8019.72'}, {'date': '2022-10-12 06:00', 'Ingest': '3762.56'}, {'date': '2022-10-12 12:00', 'Ingest': '1588.14'}, {'date': '2022-10-12 18:00', 'Ingest': '13308.08'}, {'date': '2022-10-13 00:00', 'Ingest': '9804.50'}, {'date': '2022-10-13 06:00', 'Ingest': '3402.28'}, {'date': '2022-10-13 12:00', 'Ingest': '73.82'}, {'date': '2022-10-13 18:00', 'Ingest': '14587.95'}]; var data = { datasets: [{'label': 'Ingest', 'data': graphData, 'pointBackgroundColor': 'rgb(114, 143, 206, 0.5)', 'pointBorderColor': 'rgb(114, 143, 206, 0.5)', 'pointHitRadius': 7, 'pointRadius': 2, 'pointHoverRadius': 7, 'backgroundColor': 'rgb(114, 143, 206)', 'borderColor': 'rgb(114, 143, 206)', 'parsing': {'xAxisKey': 'date', 'yAxisKey': 'Ingest'}}] }; var options = {maintainAspectRatio: false, responsive: true, scales: {y: {min: 0, type: "linear", title: {display: true, text: "GiB"}}, x: {type: "time", ticks: {autoSkip: true, autoSkipPadding: 50, maxRotation: 0}}}, plugins: {title: { display: true, text: "Ingest per Hour" }, zoom: {pan: {enabled: true, mode: "xy", threshold: 5}, zoom: {wheel: {enabled: true}, pinch: {enabled: false}, drag: {enabled: false, borderColor: "rgb(54, 162, 235)", borderWidth: 1, backgroundColor: "rgba(54, 162, 235, 0.3)"}, mode: "x"}, limits: {x: {min: "original", max: "original"}}}}}; var IngestperHour = new Chart(ctx, { type: 'line', data: data, options: options }); </script>

Zoom is working fine, however pan is not but I can't find the problem, anyone have an idea?

[otto24]

And the solution is here
#648
(guess its friday)