syidaxchart
Home Pricing Settings
ChartsChart controls

Data Zoom.

COMMUNITY

Change a target chart's visible range with a slider.

<sy-data-zoom>Installation and integration API reference
Live preview2 feature examples

LIVE EXAMPLE

Range selection

Match the page theme
Interact with the chart to see selection and range-change results here.
OptionsChanges are reflected in the preview and code.
Appearance and style5
Title and dimensions1

Move the handles below to change the target chart's X-axis range. All values are sample data.

View code
Current preview
<div id="chart-container" style="width: 100%; min-width: 0;"></div>

<script type="module">
  import { defineCustomElement as define0 } from '@syidax/advanced/components/sy-line-chart.js';
  import { defineCustomElement as define1 } from '@syidax/advanced/components/sy-data-zoom.js';
  define0();
  define1();

  const specs = [
    {
      "tag": "sy-line-chart",
      "id": "chart-target",
      "props": {
        "engine": "standard",
        "series": [
          {
            "name": "Organic",
            "color": "#8263d9",
            "values": [24, 29, 27, 38, 43, 40, 52, 58, 53, 68, 76, 84]
          },
          {
            "name": "Direct",
            "color": "#239c91",
            "values": [15, 19, 17, 24, 22, 29, 32, 30, 39, 42, 40, 51]
          },
          {
            "name": "Referral",
            "color": "#e99954",
            "values": [8, 11, 9, 15, 13, 19, 17, 23, 22, 28, 25, 33]
          }
        ],
        "xAxis": {
          "kind": "category",
          "categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
        },
        "yAxis": {
          "kind": "linear",
          "min": 0
        },
        "zoom": {
          "enabled": true
        },
        "height": 280,
        "width": 640
      }
    },
    {
      "id": "example-chart",
      "tag": "sy-data-zoom",
      "props": {
        "for": "chart-target",
        "showLabels": true,
        "width": 640,
        "height": 36
      }
    }
  ];
  const container = document.querySelector('#chart-container');
  const elements = specs.map(({ tag, id, props }) => {
    const element = document.createElement(tag);
    element.id = id;
    Object.assign(element, props);
    element.setAttribute('aria-label', 'data-zoom example chart');
    return element;
  });
  container.replaceChildren(...elements);
  const chart = elements.at(-1);
  const onEvent = event => {
    console.log('rangeChange', event.detail);
  };
  chart.addEventListener('rangeChange', onEvent);
  const observer = new ResizeObserver(([entry]) => {
    const width = Math.max(160, Math.floor(entry.contentRect.width));
    elements.forEach(element => { element.width = width; });
  });
  observer.observe(container);

  // In an SPA, call this function when the view is disposed.
  function disposeChart() {
    observer.disconnect();
    chart.removeEventListener('rangeChange', onEvent);
    container.replaceChildren();
  }
</script>

Usage and data

#

Let users select a region of interest within a wide data range.

This is not a standalone data chart. Place it in the same document as the target and set for to the target's unique ID.

Data contract

PropertyInput format
forThe target chart's ID.
showLabelsWhether to show labels at both ends of the range.
axisThe target axis to control.

Updating data

Assign a new array or object to the property instead of mutating values inside an array. Chart events provide selection results through event.detail. When disposing of the view, clean up ResizeObserver and event listeners registered by your app.

Feature examples

#

Try 2 interactive feature examples and inspect their code. Select “Edit in preview” to combine more options in the settings panel above.

Range update API

Show April through September, then return to the full range.

Interact with the chart to see results here.
View code

Slider

Compare 4 examples of Slider. Buttons and options update both the live result and source code.

Interact with the chart to see results here.
View code

API reference

#

The full public API for sy-data-zoom. Pass objects and arrays as JavaScript properties. Select a name to view usage code and type definitions.

Key properties

Attribute / PropertyType / DefaultDescription
stringDefault: undefinedThe target chart's ID.
DataZoomOrientationDefault: 'horizontal''horizontal' drives the x window, 'vertical' the y window.
CartesianAxisIdDefault: undefinedThe target axis to control.
numberDefault: 640Chart width in pixels. Update with ResizeObserver when the container changes.
numberDefault: 28Chart height in pixels.
minRangePxnumberDefault: 8The narrowest window, in track pixels (default 8).
stepFractionnumberDefault: 0.1Fraction of the window one arrow key moves (default 0.1).
showLabelsbooleanDefault: trueWhether to show labels at both ends of the range.
booleanDefault: falseSet as an HTML attribute or JavaScript property. type: boolean.
Other properties 2
Attribute / PropertyType / DefaultDescription
DataZoomTargetElement | nullDefault: undefinedThe chart element to drive (the script-set alternative to `for`).
(value: number) => stringDefault: undefinedLabel formatter (default: up to two decimals).
Events 1
EventsDetail typeDescription
DataZoomRangeChangeEventDetailEvery window the slider shows: gestures / keys ('slider'), the chart moving on its own ('chart'), `setWindow` ('api').
Methods 4

Stencil methods return Promises. Use await within an async function to read the result.

Method / ArgumentsReturn typeDescription
Promise<void>Re-read the target's extent and window (the slider also does this on the target's `rendered` and `zoomChange`).
window: CartesianZoomWindow | readonly [number, number] | nullPromise<CartesianZoomWindow | null>Set the window from script (`null` = the full extent); the chart follows with `zoomChange.source = 'api'`.
Promise<CartesianZoomWindow | null>An asynchronous method. Check the argument and return types below.
Promise<ZoomExtent | null>An asynchronous method. Check the argument and return types below.
ChartsTab Navigate Enter Open