Добавлена возможность только зума графиков по оси X

package-lock.json

@@ -16,6 +16,7 @@
         "chart.js": "^3.3.0",
         "chartjs-adapter-moment": "^1.0.0",
         "chartjs-plugin-datalabels": "^2.0.0-rc.1",
+        "chartjs-plugin-zoom": "^1.0.1",
         "craco-less": "^1.17.1",
         "date-fns": "^2.20.0",
         "moment": "^2.29.1",
@@ -4830,6 +4831,17 @@
       "resolved": "https://registry.npmjs.org/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-2.0.0-rc.1.tgz",
       "integrity": "sha512-p3JwpvIspZKHB7cRas3xoxa5BYeCOMCuCTp/AS/44RyvO8OuZ/Pz0DWl3WK2L+BMnoK72UUm0XnGLKiMEekaYA=="
     },
+    "node_modules/chartjs-plugin-zoom": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/chartjs-plugin-zoom/-/chartjs-plugin-zoom-1.0.1.tgz",
+      "integrity": "sha512-3G2Fjd1yhv+E54l0znz1zDOTA8KuUHNtPIP2s/aprNOwIQc5EQ0UVfvGuwiSXYuZuypIGQm4QOP55DPlv7wOXw==",
+      "dependencies": {
+        "hammerjs": "^2.0.8"
+      },
+      "peerDependencies": {
+        "chart.js": "^3.2.0"
+      }
+    },
     "node_modules/check-types": {
       "version": "11.1.2",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.1.2.tgz",
@@ -8563,6 +8575,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/hammerjs": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
+      "integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE=",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/handle-thing": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
@@ -25521,6 +25541,14 @@
       "resolved": "https://registry.npmjs.org/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-2.0.0-rc.1.tgz",
       "integrity": "sha512-p3JwpvIspZKHB7cRas3xoxa5BYeCOMCuCTp/AS/44RyvO8OuZ/Pz0DWl3WK2L+BMnoK72UUm0XnGLKiMEekaYA=="
     },
+    "chartjs-plugin-zoom": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/chartjs-plugin-zoom/-/chartjs-plugin-zoom-1.0.1.tgz",
+      "integrity": "sha512-3G2Fjd1yhv+E54l0znz1zDOTA8KuUHNtPIP2s/aprNOwIQc5EQ0UVfvGuwiSXYuZuypIGQm4QOP55DPlv7wOXw==",
+      "requires": {
+        "hammerjs": "^2.0.8"
+      }
+    },
     "check-types": {
       "version": "11.1.2",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.1.2.tgz",
@@ -28632,6 +28660,11 @@
         "pify": "^4.0.1"
       }
     },
+    "hammerjs": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
+      "integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE="
+    },
     "handle-thing": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",

package.json

@@ -12,6 +12,7 @@
     "chart.js": "^3.3.0",
     "chartjs-adapter-moment": "^1.0.0",
     "chartjs-plugin-datalabels": "^2.0.0-rc.1",
+    "chartjs-plugin-zoom": "^1.0.1",
     "craco-less": "^1.17.1",
     "date-fns": "^2.20.0",
     "moment": "^2.29.1",

src/components/charts/ChartTimeBase.tsx

@@ -12,8 +12,9 @@ import {
   ChartOptions} from 'chart.js'
 import 'chartjs-adapter-moment';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
+import zoomPlugin from 'chartjs-plugin-zoom';
 
-Chart.register( TimeScale, LinearScale, LineController, LineElement, PointElement, Legend, ChartDataLabels );
+Chart.register( TimeScale, LinearScale, LineController, LineElement, PointElement, Legend, ChartDataLabels, zoomPlugin );
 
 const defaultOptions = {
   responsive: true,
@@ -68,6 +69,18 @@ const defaultOptions = {
     datalabels: {
       display: false,
     },
+    zoom: {
+      zoom: {
+        wheel: {
+          enabled: true,
+          modifierKey: 'alt',
+        },
+        pinch: {
+          enabled: true
+        },
+        mode: 'x',
+      }
+    }
   }
 }
 

src/components/charts/ChartTimeOnline.tsx

@@ -110,7 +110,7 @@ export const ChartTimeOnline: React.FC<ChartTimeProps> = (props) => {
         align: 'left',
         anchor: 'center',
         clip: true
-      }
+      },
     }
   }