# chart-zooming

> Line chart of monthly temperature anomalies with selection, mouse-wheel, pinch zoom and scrollbar.

**Framework:** javascript  **Component:** Chart  **Variant:** zooming

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/javascript/chart-zooming.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-charts
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/chart-zooming/zooming.html

```html
<style>
    #control-container {
        padding: 0px !important;
    }

    #material-gradient-chart stop {
        stop-color: #00bdae;
    }

    #fabric-gradient-chart stop {
        stop-color: #4472c4;
    }

    #bootstrap-gradient-chart stop {
        stop-color: #a16ee5;
    }

    #bootstrap4-gradient-chart stop {
        stop-color: #a16ee5;
    }

    #fluent-gradient-chart stop {
        stop-color: #1AC9E6;
    }
    #fluent-dark-gradient-chart stop {
        stop-color: #1AC9E6;
    }

    #highcontrast-gradient-chart stop {
        stop-color: #79ECE4;
    }

    #tailwind-gradient-chart stop {
        stop-color: #5A61F6;
    }

    #tailwind3-gradient-chart stop {
        stop-color: #2F4074;
    }

    #bootstrap5-gradient-chart stop {
        stop-color: #FD7E14;
    }

    #material-dark-gradient-chart stop {
        stop-color: #9ECB08;
    }

    #fabric-dark-gradient-chart stop {
        stop-color: #4472c4;
    }

    #bootstrap-dark-gradient-chart stop {
        stop-color: #a16ee5;
    }

    #tailwind-dark-gradient-chart stop {
        stop-color: #8B5CF6;
    }

    #tailwind3-dark-gradient-chart stop {
        stop-color: #8029F1;
    }

    #bootstrap5-dark-gradient-chart stop {
        stop-color:  #FD7E14;
    }
    #material3-gradient-chart stop {
        stop-color: #6355C7;
    }

    #material3-dark-gradient-chart stop {
        stop-color: #4EAAFF;
    }

    #fluent2-gradient-chart stop {
        stop-color: #6200EE;
    }

    #fluent2-highcontrast-gradient-chart stop {
        stop-color: #9BB449;
    }

    #fluent2-dark-gradient-chart stop {
        stop-color: #9BB449;
    }

    .chart-gradient stop[offset="0"] {
        stop-opacity: 0.75;
    }

    .chart-gradient stop[offset="1"] {
        stop-opacity: 0;
    }

</style>
<div class="control-section">
    <div id="container" align='center'></div>
</div>
```

### src/components/chart-zooming/zooming.ts

```typescript
import { DateTime, Chart, Zoom, LineSeries, ScrollBar, DataLabel, type ILoadedEventArgs, Tooltip } from '@syncfusion/ej2-charts';
import { Browser } from '@syncfusion/ej2-base';
import { data } from '../financial-data';
import { loadChartTheme } from '../theme-color';

Chart.Inject(DateTime, DataLabel, LineSeries, Zoom, ScrollBar, Tooltip);

/**
 * Sample for Zooming in chart
 */

(window as any).default = (): void => {
    const seriesData: Object[] = [];
    let point: Object;
    let i: number;
    for (i = 0; i < data.length; i++) {
        point = { x: new Date(1941, i + 2, i), y: data[i as number] / 1000 - 0.5 };
        seriesData.push(point);
    }
    let chart: Chart = new Chart({
        //Initializing Primary X and Y Axis
        primaryXAxis: {
            valueType: 'DateTime',
            majorGridLines: { width: 0 },
            majorTickLines: { width: 0 },
            scrollbarSettings: {
                enableZoom: false,
                position: 'Bottom'
            }
        },
        primaryYAxis: {
            title: 'Temperature Anomaly (°C)',
            intervalType: 'Months',
            labelFormat: '{value}°C',
            enableScrollbarOnZooming: false,
            majorTickLines: { width: 0 },
            lineStyle: { width: 0 },
        },
        series: [
            {
                dataSource: seriesData,
                xName: 'x', yName: 'y',
                type: 'Line'
            }
        ],
        chartArea: { border: { width: 0 } },
        zoomSettings: {
            enableSelectionZooming: true,
            enableMouseWheelZooming: true,
            enableDeferredZooming: false,
            enableScrollbar: true,
            mode: 'X',
            enablePinchZooming: true,
            enableAnimation: true,
            showToolbar : true,
            toolbarPosition:{y: -60, draggable: true},
        },
        margin : {top: 20},
        width: Browser.isDevice ? '100%' : '80%',
        title: Browser.isDevice ? 'Monthly Temperature Anomalies' : 'Global Warming: Monthly Temperature Anomalies',
        titleStyle: { textAlignment: Browser.isDevice ? 'Near' : 'Center' },
        load: (args: ILoadedEventArgs) => {
            loadChartTheme(args);
        },
        tooltip: { enable: true, showNearestTooltip: true, header: '<b>${point.x}</b>', format: 'Temperature: <b>${point.y}</b>', enableHighlight: true }
    });
    chart.appendTo('#container');
};

```