# Navigator

Select a range over a condensed view of the full dataset.

Canonical: https://chart.syidax.com/docs/components/navigator/

<a id="overview"></a>

## sy-navigator

Provide a zoomed view alongside its full context.

Navigator's for points to a target chart in the same document. Distinguish sampled previews from raw data.

Base chart tier: Community. Features such as additional renderers and custom branding have separate entitlement requirements.

| Input | Data description |
| --- | --- |
| `for` | The target chart's ID. |
| `sampling` | Reduce data with minmax or lttb. |
| `series` | The series used in the preview. |

- [Run in Components](https://chart.syidax.com/charts/navigator) — Change options and view framework-specific code
- [Shared installation and integration](https://chart.syidax.com/docs/getting-started.md)

<a id="example"></a>

## Complete implementation example

```html
<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-navigator.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-navigator",
      "props": {
        "for": "chart-target",
        "sampling": "minmax",
        "width": 640,
        "height": 64
      }
    }
  ];
  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', 'navigator example chart');
    return element;
  });
  container.replaceChildren(...elements);
  const chart = elements.at(-1);
  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();
    container.replaceChildren();
  }
</script>
```

<a id="props"></a>

## Properties

<a id="property-for"></a>

### for

The target chart's ID.

| Item | Value |
| --- | --- |
| JavaScript property | `for` |
| HTML attribute | `for` |
| Type | `string` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

<a id="property-target"></a>

### target

The chart element to drive (the script-set alternative to `for`).

| Item | Value |
| --- | --- |
| JavaScript property | `target` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `NavigatorTargetElement \| null` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

- [NavigatorTargetElement](https://chart.syidax.com/docs/types/NavigatorTargetElement.md) — Type definition

<a id="property-orientation"></a>

### orientation

'horizontal' drives the x window (preview along x), 'vertical' the y window (preview along y).

| Item | Value |
| --- | --- |
| JavaScript property | `orientation` |
| HTML attribute | `orientation` |
| Type | `DataZoomOrientation` |
| Default | `'horizontal'` |
| Allowed values | `vertical`, `horizontal` |

- [DataZoomOrientation](https://chart.syidax.com/docs/types/DataZoomOrientation.md) — Type definition

<a id="property-axis"></a>

### axis

Which axis of the target (id or slot index); default: the primary axis of the orientation.

| Item | Value |
| --- | --- |
| JavaScript property | `axis` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `CartesianAxisId` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

- [CartesianAxisId](https://chart.syidax.com/docs/types/CartesianAxisId.md) — Type definition

<a id="property-width"></a>

### width

Chart width in pixels. If the container width changes, update width from a ResizeObserver.

| Item | Value |
| --- | --- |
| JavaScript property | `width` |
| HTML attribute | `width` |
| Type | `number` |
| Default | `640` |

<a id="property-height"></a>

### height

Chart height in pixels. Allow space for axes, titles, and the legend.

| Item | Value |
| --- | --- |
| JavaScript property | `height` |
| HTML attribute | `height` |
| Type | `number` |
| Default | `60` |

<a id="property-minRangePx"></a>

### minRangePx

The narrowest window, in track pixels (default 8).

| Item | Value |
| --- | --- |
| JavaScript property | `minRangePx` |
| HTML attribute | `min-range-px` |
| Type | `number` |
| Default | `8` |

<a id="property-stepFraction"></a>

### stepFraction

Fraction of the window one arrow key moves (default 0.1).

| Item | Value |
| --- | --- |
| JavaScript property | `stepFraction` |
| HTML attribute | `step-fraction` |
| Type | `number` |
| Default | `0.1` |

<a id="property-showLabels"></a>

### showLabels

Show the window's min / max next to the handles while zoomed.

| Item | Value |
| --- | --- |
| JavaScript property | `showLabels` |
| HTML attribute | `show-labels` |
| Type | `boolean` |
| Default | `true` |

<a id="property-disabled"></a>

### disabled

Set as an HTML attribute or JavaScript property. type: boolean.

| Item | Value |
| --- | --- |
| JavaScript property | `disabled` |
| HTML attribute | `disabled` |
| Type | `boolean` |
| Default | `false` |

<a id="property-series"></a>

### series

The series used in the preview.

| Item | Value |
| --- | --- |
| JavaScript property | `series` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `number \| string` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

<a id="property-sampling"></a>

### sampling

Reduce data with minmax or lttb.

| Item | Value |
| --- | --- |
| JavaScript property | `sampling` |
| HTML attribute | `sampling` |
| Type | `NavigatorSampling` |
| Default | `'minmax'` |
| Allowed values | `minmax`, `lttb` |

- [NavigatorSampling](https://chart.syidax.com/docs/types/NavigatorSampling.md) — Type definition

<a id="methods"></a>

## Methods

<a id="method-refresh"></a>

### refresh

Re-read the chart's extent, data and window (also done on the chart's `rendered`).

```typescript
refresh(): Promise<void>
```

Return type: `Promise<void>`. Call the method after element registration and await its Promise result.

<a id="method-setWindow"></a>

### setWindow

Set the window from script (`null` = the full extent) through the inner slider.

```typescript
setWindow(window: CartesianZoomWindow | readonly [number, number] | null): Promise<CartesianZoomWindow | null>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `window` | `CartesianZoomWindow \| readonly [number, number] \| null` | Required |

Return type: `Promise<CartesianZoomWindow | null>`. Call the method after element registration and await its Promise result.

- [CartesianZoomWindow](https://chart.syidax.com/docs/types/CartesianZoomWindow.md) — Type definition

<a id="method-getWindow"></a>

### getWindow

An asynchronous method. Check the argument and return types below.

```typescript
getWindow(): Promise<CartesianZoomWindow | null>
```

Return type: `Promise<CartesianZoomWindow | null>`. Call the method after element registration and await its Promise result.

- [CartesianZoomWindow](https://chart.syidax.com/docs/types/CartesianZoomWindow.md) — Type definition

<a id="method-getExtent"></a>

### getExtent

An asynchronous method. Check the argument and return types below.

```typescript
getExtent(): Promise<ZoomExtent | null>
```

Return type: `Promise<ZoomExtent | null>`. Call the method after element registration and await its Promise result.

- [ZoomExtent](https://chart.syidax.com/docs/types/ZoomExtent.md) — Type definition