# chart-zooming

> Chart explores dense data using date-time zooming, a scrollbar, and tooltip.

**Framework:** vue  **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/vue/chart-zooming.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-vue-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/Chart.vue

```vue

<template>
  <div>
      <div class="control-section">
          <div align='center'>
              <ejs-chart style='display:block;width: 100%' :chartArea='chartArea' :width='width'
                  align='center' id='chart-zooming' :primaryXAxis='primaryXAxis' :legendSettings='legend' :tooltip='tooltip' :margin = 'margin' :titleStyle = 'titleStyle'
                  :zoomSettings='zoomSettings' :title='title' :primaryYAxis='primaryYAxis'>
                  <e-series-collection>
                      <e-series :dataSource='series' type='Line' xName='x' yName='y' :animation='animation'
                         >
                      </e-series>
                  </e-series-collection>
              </ejs-chart>
          </div>
      </div>
      <svg style="height: 0">
          <defs>
              <linearGradient id="material-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0"
                  y1="0" y2="1">
                  <stop offset="0"></stop>
                  <stop offset="1"></stop>
              </linearGradient>
              <linearGradient id="fabric-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0"
                  y1="0" y2="1">
                  <stop offset="0"></stop>
                  <stop offset="1"></stop>
              </linearGradient>
              <linearGradient id="bootstrap-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0"
                  y1="0" y2="1">
                  <stop offset="0"></stop>
                  <stop offset="1"></stop>
              </linearGradient>
              <linearGradient id="bootstrap4-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0"
                  x2="0" y1="0" y2="1">
                  <stop offset="0"></stop>
                  <stop offset="1"></stop>
              </linearGradient>
              <linearGradient id="highcontrast-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0"
                  x2="0" y1="0" y2="1">
                  <stop offset="0"></stop>
                  <stop offset="1"></stop>
              </linearGradient>
              <linearGradient id="tailwind-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0"
                  y1="0" y2="1">
                  <stop offset="0"></stop>
                  <stop offset="1"></stop>
              </linearGradient>
              <linearGradient id="tailwind3-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0"
                  y1="0" y2="1">
                  <stop offset="0"></stop>
                  <stop offset="1"></stop>
              </linearGradient>
              <linearGradient id="bootstrap5-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0"
                  x2="0" y1="0" y2="1">
                  <stop offset="0"></stop>
                  <stop offset="1"></stop>
              </linearGradient>
              <linearGradient id="material-dark-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0"
                  x2="0" y1="0" y2="1">
                  <stop offset="0"></stop>
                  <stop offset="1"></stop>
              </linearGradient>
              <linearGradient id="fabric-dark-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0"
                  x2="0" y1="0" y2="1">
                  <stop offset="0"></stop>
                  <stop offset="1"></stop>
              </linearGradient>
              <linearGradient id="bootstrap-dark-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0"
                  x2="0" y1="0" y2="1">
                  <stop offset="0"></stop>
                  <stop offset="1"></stop>
              </linearGradient>
              <linearGradient id="tailwind-dark-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0"
                  x2="0" y1="0" y2="1">
                  <stop offset="0"></stop>
                  <stop offset="1"></stop>
              </linearGradient>
              <linearGradient id="tailwind3-dark-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0"
                  x2="0" y1="0" y2="1">
                  <stop offset="0"></stop>
                  <stop offset="1"></stop>
              </linearGradient>
              <linearGradient id="bootstrap5-dark-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0"
                  x2="0" y1="0" y2="1">
                  <stop offset="0"></stop>
                  <stop offset="1"></stop>
              </linearGradient>
              <linearGradient id="fluent-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0"
                  y1="0" y2="1">
                  <stop offset="0"></stop>
                  <stop offset="1"></stop>
              </linearGradient>
              <linearGradient id="fluent-dark-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0"
                  x2="0" y1="0" y2="1">
                  <stop offset="0"></stop>
                  <stop offset="1"></stop>
              </linearGradient>
              <linearGradient id="material3-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
                  <stop offset="0"></stop>
                  <stop offset="1"></stop>
              </linearGradient>
              <linearGradient id="material3-dark-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
                  <stop offset="0"></stop>
                  <stop offset="1"></stop>
              </linearGradient>
              <linearGradient id="fluent2-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
                  <stop offset="0"></stop>
                  <stop offset="1"></stop>
              </linearGradient>
              <linearGradient id="fluent2-highcontrast-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
                  <stop offset="0"></stop>
                  <stop offset="1"></stop>
              </linearGradient>
              <linearGradient id="fluent2-dark-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
                  <stop offset="0"></stop>
                  <stop offset="1"></stop>
              </linearGradient>
          </defs>
      </svg>
  </div>
</template>
<script>
import { Browser } from '@syncfusion/ej2-base';
import { ChartComponent, SeriesDirective, SeriesCollectionDirective, LineSeries, Zoom, DateTime, ScrollBar, Tooltip, Highlight } from "@syncfusion/ej2-vue-charts";

const data = [
    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,
    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,
    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,
    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,
    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,
    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
];

  const seriesData = [];
    let point;
    let i;
    for (i = 0; i < data.length; i++) {
        point = { x: new Date(1941, i + 2, i), y: data[i] / 1000 - 0.5 };
        seriesData.push(point);
    }

export default {
  components: {
      'ejs-chart': ChartComponent,
      'e-series-collection': SeriesCollectionDirective,
      'e-series': SeriesDirective
  },
  data: function () {
      return {
          primaryXAxis: {
            valueType: 'DateTime',
            majorGridLines: { width: 0 },
            majorTickLines: { width: 0 },
            scrollbarSettings: {
                enableZoom: false,
                position: 'Bottom'
            }
          },
          //Initializing Primary Y Axis
          primaryYAxis: {
            title: 'Temperature Anomaly (°C)',
            intervalType: 'Months',
            labelFormat: '{value}°C',
            enableScrollbarOnZooming: false,
            majorTickLines: { width: 0 },
            lineStyle: { width: 0 },
          },
          legend: {
              visible: false
          },
          animation: { enable: true },
          zoomSettings: {
            enableSelectionZooming: true,
            enableMouseWheelZooming: true,
            enableDeferredZooming: false,
            enableScrollbar: true,
            mode: 'X',
            enablePinchZooming: true,
            enableAnimation: true,
            showToolbar : true,
            toolbarPosition:{y: -60, draggable: true},
          },
          chartArea: {
              border: {
                  width: 0
              }
          },
          tooltip: {
          header: '<b>${point.x}</b>',
          showNearestTooltip: true,
          enable: true,
          format: 'Temperature: <b>${point.y}</b>', enableHighlight: true
          },
          margin : {top: 20},
          width: Browser.isDevice ? '100%' : '80%',
          border: { width: 2},       
          title: Browser.isDevice ? 'Monthly Temperature Anomalies' : 'Global Warming: Monthly Temperature Anomalies',
          titleStyle: { textAlignment: Browser.isDevice ? 'Near' : 'Center' },
          series: seriesData,
      };
  },
  provide: {
      chart: [LineSeries, DateTime, Zoom, ScrollBar, Tooltip, Highlight]
  }
};
</script>

```

### src/components/chart-zooming/ChartView.vue

```vue
<template>
  <Chart />
</template>

<script setup>
import Chart from '../../components/Chart.vue'
</script>
```