{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "chart-zooming",
  "framework": "javascript",
  "type": "registry:component",
  "component": "Chart",
  "variant": "zooming",
  "dependencies": [
    "@syncfusion/ej2-charts"
  ],
  "description": "Line chart of monthly temperature anomalies with selection, mouse-wheel, pinch zoom and scrollbar.",
  "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/javascript/llms.txt",
    "skillPack": "syncfusion/javascript-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/javascript/chart-zooming.md"
  },
  "files": [
    {
      "target": "src/components/chart-zooming/zooming.html",
      "content": "<style>\n    #control-container {\n        padding: 0px !important;\n    }\n\n    #material-gradient-chart stop {\n        stop-color: #00bdae;\n    }\n\n    #fabric-gradient-chart stop {\n        stop-color: #4472c4;\n    }\n\n    #bootstrap-gradient-chart stop {\n        stop-color: #a16ee5;\n    }\n\n    #bootstrap4-gradient-chart stop {\n        stop-color: #a16ee5;\n    }\n\n    #fluent-gradient-chart stop {\n        stop-color: #1AC9E6;\n    }\n    #fluent-dark-gradient-chart stop {\n        stop-color: #1AC9E6;\n    }\n\n    #highcontrast-gradient-chart stop {\n        stop-color: #79ECE4;\n    }\n\n    #tailwind-gradient-chart stop {\n        stop-color: #5A61F6;\n    }\n\n    #tailwind3-gradient-chart stop {\n        stop-color: #2F4074;\n    }\n\n    #bootstrap5-gradient-chart stop {\n        stop-color: #FD7E14;\n    }\n\n    #material-dark-gradient-chart stop {\n        stop-color: #9ECB08;\n    }\n\n    #fabric-dark-gradient-chart stop {\n        stop-color: #4472c4;\n    }\n\n    #bootstrap-dark-gradient-chart stop {\n        stop-color: #a16ee5;\n    }\n\n    #tailwind-dark-gradient-chart stop {\n        stop-color: #8B5CF6;\n    }\n\n    #tailwind3-dark-gradient-chart stop {\n        stop-color: #8029F1;\n    }\n\n    #bootstrap5-dark-gradient-chart stop {\n        stop-color:  #FD7E14;\n    }\n    #material3-gradient-chart stop {\n        stop-color: #6355C7;\n    }\n\n    #material3-dark-gradient-chart stop {\n        stop-color: #4EAAFF;\n    }\n\n    #fluent2-gradient-chart stop {\n        stop-color: #6200EE;\n    }\n\n    #fluent2-highcontrast-gradient-chart stop {\n        stop-color: #9BB449;\n    }\n\n    #fluent2-dark-gradient-chart stop {\n        stop-color: #9BB449;\n    }\n\n    .chart-gradient stop[offset=\"0\"] {\n        stop-opacity: 0.75;\n    }\n\n    .chart-gradient stop[offset=\"1\"] {\n        stop-opacity: 0;\n    }\n\n</style>\n<div class=\"control-section\">\n    <div id=\"container\" align='center'></div>\n</div>"
    },
    {
      "target": "src/components/chart-zooming/zooming.ts",
      "content": "import { DateTime, Chart, Zoom, LineSeries, ScrollBar, DataLabel, type ILoadedEventArgs, Tooltip } from '@syncfusion/ej2-charts';\nimport { Browser } from '@syncfusion/ej2-base';\nimport { data } from '../financial-data';\nimport { loadChartTheme } from '../theme-color';\n\nChart.Inject(DateTime, DataLabel, LineSeries, Zoom, ScrollBar, Tooltip);\n\n/**\n * Sample for Zooming in chart\n */\n\n(window as any).default = (): void => {\n    const seriesData: Object[] = [];\n    let point: Object;\n    let i: number;\n    for (i = 0; i < data.length; i++) {\n        point = { x: new Date(1941, i + 2, i), y: data[i as number] / 1000 - 0.5 };\n        seriesData.push(point);\n    }\n    let chart: Chart = new Chart({\n        //Initializing Primary X and Y Axis\n        primaryXAxis: {\n            valueType: 'DateTime',\n            majorGridLines: { width: 0 },\n            majorTickLines: { width: 0 },\n            scrollbarSettings: {\n                enableZoom: false,\n                position: 'Bottom'\n            }\n        },\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        series: [\n            {\n                dataSource: seriesData,\n                xName: 'x', yName: 'y',\n                type: 'Line'\n            }\n        ],\n        chartArea: { border: { width: 0 } },\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        margin : {top: 20},\n        width: Browser.isDevice ? '100%' : '80%',\n        title: Browser.isDevice ? 'Monthly Temperature Anomalies' : 'Global Warming: Monthly Temperature Anomalies',\n        titleStyle: { textAlignment: Browser.isDevice ? 'Near' : 'Center' },\n        load: (args: ILoadedEventArgs) => {\n            loadChartTheme(args);\n        },\n        tooltip: { enable: true, showNearestTooltip: true, header: '<b>${point.x}</b>', format: 'Temperature: <b>${point.y}</b>', enableHighlight: true }\n    });\n    chart.appendTo('#container');\n};\n"
    }
  ]
}