{ "$schema": "https://ai.syncfusion.com/schema/registry-item.json", "name": "chart-zooming", "framework": "angular", "type": "registry:component", "component": "Chart", "variant": "zooming", "dependencies": [ "@syncfusion/ej2-angular-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/angular/llms.txt", "skillPack": "syncfusion/angular-ui-components-skills", "docs": "https://ai.syncfusion.com/gallery/angular/chart-zooming.md" }, "files": [ { "target": "src/components/chart-zooming/zooming.component.ts", "content": "import { Component, ViewEncapsulation } from '@angular/core';\nimport { ILoadedEventArgs, ChartTheme, ScrollBar, ChartAllModule } from '@syncfusion/ej2-angular-charts';\nimport { Browser } from '@syncfusion/ej2-base';\nimport { loadChartTheme, themes, borderColor } from '../theme-color';\n/**\n * Sample for Zooming in chart\n */\n@Component({\n selector: 'control-content',\n templateUrl: 'zooming.html',\n encapsulation: ViewEncapsulation.None,\n standalone: true,\n imports: [ChartAllModule]\n})\nexport class ZoomingChartComponent {\n public theme: ChartTheme | string = loadChartTheme(); \n // public fill: string = 'url(#' + this.selectedTheme + '-gradient-chart)';\n public seriesData: Object[] = [];\n\n private loadSeriesData(): void {\n this.seriesData = [];\n for (let i = 0; i < data.length; i++) {\n let point = { x: new Date(1941, i + 2, i), y: data[i as number] / 1000 - 0.5 };\n this.seriesData.push(point);\n }\n }\n\n //Initializing Primary X Axis\n public primaryXAxis: Object = {\n valueType: 'DateTime',\n majorGridLines: { width: 0 },\n majorTickLines: { width: 0 },\n scrollbarSettings: {\n enableZoom: false, position: 'Bottom'\n }\n };\n //Initializing Primary Y Axis\n public primaryYAxis: Object = {\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 public legend: Object = {\n visible: false\n };\n public animation: Object = { enable: true };\n public zoomSettings: Object = {\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 public chartArea: Object = {\n border: {\n width: 0\n }\n };\n public margin: Object ={\n top: 20,\n };\n public tooltip: Object = {\n enable: true, \n showNearestTooltip: true, \n header: '${point.x}', \n format: 'Temperature: ${point.y}',\n enableHighlight: true\n };\n\n // custom code start\n public load(args: ILoadedEventArgs): void {\n loadChartTheme(args, true);\n args.chart.scrollBarModule = new ScrollBar(args.chart);\n args.chart.series[0].border!.color = borderColor[themes.indexOf(args.chart.theme.toLowerCase())];\n };\n // custom code end\n public border: Object = { width: 2, color: borderColor[themes.indexOf(this.theme)] };\n public width: string = Browser.isDevice ? '100%' : '80%'\n public title: string = Browser.isDevice ? 'Monthly Temperature Anomalies' : 'Global Warming: Monthly Temperature Anomalies'\n public titleStyle: Object = { textAlignment: Browser.isDevice ? 'Near' : 'Center' };\n constructor() {\n this.loadSeriesData();\n\n };\n\n}" }, { "target": "src/components/chart-zooming/zooming.html", "content": "\n\n
\n
\n \n \n \n \n \n \n
\n
\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n" } ] }