{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "chart-zooming",
  "framework": "vue",
  "type": "registry:component",
  "component": "Chart",
  "variant": "zooming",
  "dependencies": [
    "@syncfusion/ej2-vue-charts"
  ],
  "description": "Chart explores dense data using date-time zooming, a scrollbar, and tooltip.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/vue/llms.txt",
    "skillPack": "syncfusion/vue-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/vue/chart-zooming.md"
  },
  "files": [
    {
      "target": "src/components/chart-zooming/Chart.vue",
      "content": "\n<template>\n  <div>\n      <div class=\"control-section\">\n          <div align='center'>\n              <ejs-chart style='display:block;width: 100%' :chartArea='chartArea' :width='width'\n                  align='center' id='chart-zooming' :primaryXAxis='primaryXAxis' :legendSettings='legend' :tooltip='tooltip' :margin = 'margin' :titleStyle = 'titleStyle'\n                  :zoomSettings='zoomSettings' :title='title' :primaryYAxis='primaryYAxis'>\n                  <e-series-collection>\n                      <e-series :dataSource='series' type='Line' xName='x' yName='y' :animation='animation'\n                         >\n                      </e-series>\n                  </e-series-collection>\n              </ejs-chart>\n          </div>\n      </div>\n      <svg style=\"height: 0\">\n          <defs>\n              <linearGradient id=\"material-gradient-chart\" style=\"opacity: 0.75\" class=\"chart-gradient\" x1=\"0\" x2=\"0\"\n                  y1=\"0\" y2=\"1\">\n                  <stop offset=\"0\"></stop>\n                  <stop offset=\"1\"></stop>\n              </linearGradient>\n              <linearGradient id=\"fabric-gradient-chart\" style=\"opacity: 0.75\" class=\"chart-gradient\" x1=\"0\" x2=\"0\"\n                  y1=\"0\" y2=\"1\">\n                  <stop offset=\"0\"></stop>\n                  <stop offset=\"1\"></stop>\n              </linearGradient>\n              <linearGradient id=\"bootstrap-gradient-chart\" style=\"opacity: 0.75\" class=\"chart-gradient\" x1=\"0\" x2=\"0\"\n                  y1=\"0\" y2=\"1\">\n                  <stop offset=\"0\"></stop>\n                  <stop offset=\"1\"></stop>\n              </linearGradient>\n              <linearGradient id=\"bootstrap4-gradient-chart\" style=\"opacity: 0.75\" class=\"chart-gradient\" x1=\"0\"\n                  x2=\"0\" y1=\"0\" y2=\"1\">\n                  <stop offset=\"0\"></stop>\n                  <stop offset=\"1\"></stop>\n              </linearGradient>\n              <linearGradient id=\"highcontrast-gradient-chart\" style=\"opacity: 0.75\" class=\"chart-gradient\" x1=\"0\"\n                  x2=\"0\" y1=\"0\" y2=\"1\">\n                  <stop offset=\"0\"></stop>\n                  <stop offset=\"1\"></stop>\n              </linearGradient>\n              <linearGradient id=\"tailwind-gradient-chart\" style=\"opacity: 0.75\" class=\"chart-gradient\" x1=\"0\" x2=\"0\"\n                  y1=\"0\" y2=\"1\">\n                  <stop offset=\"0\"></stop>\n                  <stop offset=\"1\"></stop>\n              </linearGradient>\n              <linearGradient id=\"tailwind3-gradient-chart\" style=\"opacity: 0.75\" class=\"chart-gradient\" x1=\"0\" x2=\"0\"\n                  y1=\"0\" y2=\"1\">\n                  <stop offset=\"0\"></stop>\n                  <stop offset=\"1\"></stop>\n              </linearGradient>\n              <linearGradient id=\"bootstrap5-gradient-chart\" style=\"opacity: 0.75\" class=\"chart-gradient\" x1=\"0\"\n                  x2=\"0\" y1=\"0\" y2=\"1\">\n                  <stop offset=\"0\"></stop>\n                  <stop offset=\"1\"></stop>\n              </linearGradient>\n              <linearGradient id=\"material-dark-gradient-chart\" style=\"opacity: 0.75\" class=\"chart-gradient\" x1=\"0\"\n                  x2=\"0\" y1=\"0\" y2=\"1\">\n                  <stop offset=\"0\"></stop>\n                  <stop offset=\"1\"></stop>\n              </linearGradient>\n              <linearGradient id=\"fabric-dark-gradient-chart\" style=\"opacity: 0.75\" class=\"chart-gradient\" x1=\"0\"\n                  x2=\"0\" y1=\"0\" y2=\"1\">\n                  <stop offset=\"0\"></stop>\n                  <stop offset=\"1\"></stop>\n              </linearGradient>\n              <linearGradient id=\"bootstrap-dark-gradient-chart\" style=\"opacity: 0.75\" class=\"chart-gradient\" x1=\"0\"\n                  x2=\"0\" y1=\"0\" y2=\"1\">\n                  <stop offset=\"0\"></stop>\n                  <stop offset=\"1\"></stop>\n              </linearGradient>\n              <linearGradient id=\"tailwind-dark-gradient-chart\" style=\"opacity: 0.75\" class=\"chart-gradient\" x1=\"0\"\n                  x2=\"0\" y1=\"0\" y2=\"1\">\n                  <stop offset=\"0\"></stop>\n                  <stop offset=\"1\"></stop>\n              </linearGradient>\n              <linearGradient id=\"tailwind3-dark-gradient-chart\" style=\"opacity: 0.75\" class=\"chart-gradient\" x1=\"0\"\n                  x2=\"0\" y1=\"0\" y2=\"1\">\n                  <stop offset=\"0\"></stop>\n                  <stop offset=\"1\"></stop>\n              </linearGradient>\n              <linearGradient id=\"bootstrap5-dark-gradient-chart\" style=\"opacity: 0.75\" class=\"chart-gradient\" x1=\"0\"\n                  x2=\"0\" y1=\"0\" y2=\"1\">\n                  <stop offset=\"0\"></stop>\n                  <stop offset=\"1\"></stop>\n              </linearGradient>\n              <linearGradient id=\"fluent-gradient-chart\" style=\"opacity: 0.75\" class=\"chart-gradient\" x1=\"0\" x2=\"0\"\n                  y1=\"0\" y2=\"1\">\n                  <stop offset=\"0\"></stop>\n                  <stop offset=\"1\"></stop>\n              </linearGradient>\n              <linearGradient id=\"fluent-dark-gradient-chart\" style=\"opacity: 0.75\" class=\"chart-gradient\" x1=\"0\"\n                  x2=\"0\" y1=\"0\" y2=\"1\">\n                  <stop offset=\"0\"></stop>\n                  <stop offset=\"1\"></stop>\n              </linearGradient>\n              <linearGradient id=\"material3-gradient-chart\" style=\"opacity: 0.75\" class=\"chart-gradient\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n                  <stop offset=\"0\"></stop>\n                  <stop offset=\"1\"></stop>\n              </linearGradient>\n              <linearGradient id=\"material3-dark-gradient-chart\" style=\"opacity: 0.75\" class=\"chart-gradient\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n                  <stop offset=\"0\"></stop>\n                  <stop offset=\"1\"></stop>\n              </linearGradient>\n              <linearGradient id=\"fluent2-gradient-chart\" style=\"opacity: 0.75\" class=\"chart-gradient\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n                  <stop offset=\"0\"></stop>\n                  <stop offset=\"1\"></stop>\n              </linearGradient>\n              <linearGradient id=\"fluent2-highcontrast-gradient-chart\" style=\"opacity: 0.75\" class=\"chart-gradient\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n                  <stop offset=\"0\"></stop>\n                  <stop offset=\"1\"></stop>\n              </linearGradient>\n              <linearGradient id=\"fluent2-dark-gradient-chart\" style=\"opacity: 0.75\" class=\"chart-gradient\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n                  <stop offset=\"0\"></stop>\n                  <stop offset=\"1\"></stop>\n              </linearGradient>\n          </defs>\n      </svg>\n  </div>\n</template>\n<script>\nimport { Browser } from '@syncfusion/ej2-base';\nimport { ChartComponent, SeriesDirective, SeriesCollectionDirective, LineSeries, Zoom, DateTime, ScrollBar, Tooltip, Highlight } from \"@syncfusion/ej2-vue-charts\";\n\nconst data = [\n    614.398886, 521.54577, 607.41, 528.674034, 649.02, 634.855, 548.42, 639.808083, 599.36, 643.823032, 470.58, 547.33856, 543.24, 350.4686, 453.804214, 358.51972, 127.98, 465.66413, 121.67, 276.50556, 130.28, 290.43361, 247.47, 56.006424, 56.66, 120.11538, 272.18, 330.8197, 329.2, 141.8835,\n    491.31, 554.09436, 340.3, 666.27214, 386.05, 675.33273, 355.49, 479.08539, 587.95, 478.83736, 613.33, 477.08728, 665.84, 277.7215, 360.77, 582.38945, 685.93, 690.52167, 526, 400.62505,\n    305.46, 209.73143, 393.93, 218.58078, 454.97, 228.5354, 405.23, 238.29027, 251.37, 343.4591, 228.44, 542.32413, 403.53, 238.23318, 358.73, 233.33633, 408.9, 528.79991, 212.4, 226.28374,\n    535.47, 225.42172, 358.46, 225.79953, 159.09, 226.62344, 224.74, 227.80173, 317.94, 230.89693, 182.87, 234.7583, 158.2, 238.13414, 80.91, 241.77034, 428.72,\n    245.7227, 138.35, 252.26382, 244.54, 262.16412, 320.02, 275.77518, 696.06, 291.17618, 189.3, 306.58655, 234.2, 321.97433, 138.79, 339.30057, 629.59,\n    357.09732, 461.06, 271.47717, 336.29, 384.07816, 142.83913, 734.0764, 429.46431, 325.61528, 524.30643, 623.9551, 522.99226, 420.52591\n];\n\n  const seriesData = [];\n    let point;\n    let i;\n    for (i = 0; i < data.length; i++) {\n        point = { x: new Date(1941, i + 2, i), y: data[i] / 1000 - 0.5 };\n        seriesData.push(point);\n    }\n\nexport default {\n  components: {\n      'ejs-chart': ChartComponent,\n      'e-series-collection': SeriesCollectionDirective,\n      'e-series': SeriesDirective\n  },\n  data: function () {\n      return {\n          primaryXAxis: {\n            valueType: 'DateTime',\n            majorGridLines: { width: 0 },\n            majorTickLines: { width: 0 },\n            scrollbarSettings: {\n                enableZoom: false,\n                position: 'Bottom'\n            }\n          },\n          //Initializing Primary Y Axis\n          primaryYAxis: {\n            title: 'Temperature Anomaly (°C)',\n            intervalType: 'Months',\n            labelFormat: '{value}°C',\n            enableScrollbarOnZooming: false,\n            majorTickLines: { width: 0 },\n            lineStyle: { width: 0 },\n          },\n          legend: {\n              visible: false\n          },\n          animation: { enable: true },\n          zoomSettings: {\n            enableSelectionZooming: true,\n            enableMouseWheelZooming: true,\n            enableDeferredZooming: false,\n            enableScrollbar: true,\n            mode: 'X',\n            enablePinchZooming: true,\n            enableAnimation: true,\n            showToolbar : true,\n            toolbarPosition:{y: -60, draggable: true},\n          },\n          chartArea: {\n              border: {\n                  width: 0\n              }\n          },\n          tooltip: {\n          header: '<b>${point.x}</b>',\n          showNearestTooltip: true,\n          enable: true,\n          format: 'Temperature: <b>${point.y}</b>', enableHighlight: true\n          },\n          margin : {top: 20},\n          width: Browser.isDevice ? '100%' : '80%',\n          border: { width: 2},       \n          title: Browser.isDevice ? 'Monthly Temperature Anomalies' : 'Global Warming: Monthly Temperature Anomalies',\n          titleStyle: { textAlignment: Browser.isDevice ? 'Near' : 'Center' },\n          series: seriesData,\n      };\n  },\n  provide: {\n      chart: [LineSeries, DateTime, Zoom, ScrollBar, Tooltip, Highlight]\n  }\n};\n</script>\n"
    },
    {
      "target": "src/components/chart-zooming/ChartView.vue",
      "content": "<template>\n  <Chart />\n</template>\n\n<script setup>\nimport Chart from '../../components/Chart.vue'\n</script>"
    }
  ]
}