Visual Map.

COMMUNITY

Control value-based colors, sizes, and the selected range.

<sy-visual-map>Installation and integration API reference

LIVE EXAMPLE

Continuous color range

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 style11

Legend typeDirectionSegment countSelection modeItem widthItem heightDecimal places

Range selectionShow labelsApply selection immediatelyDisable interaction

Title and dimensions1

Chart height (px)

Use the slider to select the target Heatmap's value 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-pro/components/sy-heatmap.js';
  import { defineCustomElement as define1 } from '@syidax/advanced-pro/components/sy-visual-map.js';
  define0();
  define1();

  // Pro: complete registerLicense at app startup using your issued certificate.
  // The website preview certificate is not for use in customer apps.
  const specs = [
    {
      "tag": "sy-heatmap",
      "id": "chart-target",
      "props": {
        "data": [
          {
            "x": 0,
            "y": 0,
            "value": 10
          },
          {
            "x": 1,
            "y": 0,
            "value": 27
          },
          {
            "x": 2,
            "y": 0,
            "value": 44
          },
          {
            "x": 3,
            "y": 0,
            "value": 61
          },
          {
            "x": 4,
            "y": 0,
            "value": 78
          },
          {
            "x": 5,
            "y": 0,
            "value": 95
          },
          {
            "x": 0,
            "y": 1,
            "value": 22
          },
          {
            "x": 1,
            "y": 1,
            "value": 39
          },
          {
            "x": 2,
            "y": 1,
            "value": 56
          },
          {
            "x": 3,
            "y": 1,
            "value": 73
          },
          {
            "x": 4,
            "y": 1,
            "value": 90
          },
          {
            "x": 5,
            "y": 1,
            "value": 17
          },
          {
            "x": 0,
            "y": 2,
            "value": 34
          },
          {
            "x": 1,
            "y": 2,
            "value": 51
          },
          {
            "x": 2,
            "y": 2,
            "value": 68
          },
          {
            "x": 3,
            "y": 2,
            "value": 85
          },
          {
            "x": 4,
            "y": 2,
            "value": 12
          },
          {
            "x": 5,
            "y": 2,
            "value": 29
          },
          {
            "x": 0,
            "y": 3,
            "value": 46
          },
          {
            "x": 1,
            "y": 3,
            "value": 63
          },
          {
            "x": 2,
            "y": 3,
            "value": 80
          },
          {
            "x": 3,
            "y": 3,
            "value": 97
          },
          {
            "x": 4,
            "y": 3,
            "value": 24
          },
          {
            "x": 5,
            "y": 3,
            "value": 41
          },
          {
            "x": 0,
            "y": 4,
            "value": 58
          },
          {
            "x": 1,
            "y": 4,
            "value": 75
          },
          {
            "x": 2,
            "y": 4,
            "value": 92
          },
          {
            "x": 3,
            "y": 4,
            "value": 19
          },
          {
            "x": 4,
            "y": 4,
            "value": 36
          },
          {
            "x": 5,
            "y": 4,
            "value": 53
          }
        ],
        "height": 280,
        "width": 640
      }
    },
    {
      "id": "example-chart",
      "tag": "sy-visual-map",
      "props": {
        "for": "chart-target",
        "type": "continuous",
        "dimension": "value",
        "min": 0,
        "max": 100,
        "calculable": true,
        "color": ["#eee6ff", "#8263d9", "#34265d"],
        "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', 'visual-map 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

Connect a continuous color legend or interval filters to a chart.

Choose a dimension supported by the target. This example connects to Heatmap's value.

Data contract

Property	Input format
`for`	The target chart's ID.
`dimension`	The data dimension to read.
`type`	continuous or piecewise.
`min`	Together with max, defines the value range.

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 3 interactive feature examples and inspect their code. Select “Edit in preview” to combine more options in the settings panel above.

Color range API

Narrow the value range to 25–75 and inspect the filtered result.

Interact with the chart to see results here.

View code

Series colour

Compare 5 examples of Series colour. Buttons and options update both the live result and source code.

Interact with the chart to see results here.

View code

Continuous

Compare 7 examples of Continuous. 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-visual-map. Pass objects and arrays as JavaScript properties. Select a name to view usage code and type definitions.

Key properties

Attribute / Property	Type / Default	Description
	`VisualMapType`Default: 'continuous'	continuous or piecewise.
	`number`Default: undefined	Together with max, defines the value range.
	`string`Default: undefined	The target chart's ID.
	`VisualMapDimension`Default: undefined	The data dimension to read.
splitNumber	`number`Default: 5	Piecewise: equal intervals over `[min, max]` when no pieces / categories are given (default 5).
selectedMode	`VisualMapSelectedMode`Default: 'multiple'	Piecewise: 'multiple' toggles pieces independently, 'single' keeps one piece selected.
itemWidth	`number`Default: 20	Piecewise: the swatch size of a piece (ECharts itemWidth / itemHeight).
itemHeight	`number`Default: 14	Set as an HTML attribute or JavaScript property. type: number.
	`DataZoomOrientation`Default: 'horizontal'	'horizontal' runs min → max left to right, 'vertical' bottom to top.
	`number`Default: 320	Chart width in pixels. Update with ResizeObserver when the container changes.
	`number`Default: 28	Chart height in pixels.
	`boolean`Default: false	Show the two range handles: the selected range can be dragged, keyed and set from script.
	`number`Default: undefined	Fixed decimals for the labels (unset = up to two, trimmed).
showLabels	`boolean`Default: true	Show the end labels, and the handle labels while a range is selected.
	`boolean`Default: true	Report the frames of a drag (`live: true`); off = only the release reports.
	`boolean`Default: false	Set as an HTML attribute or JavaScript property. type: boolean.

Other properties 15

Attribute / Property	Type / Default	Description
	`number`Default: undefined	Set as an HTML attribute or JavaScript property. type: number.
	`VisualMapTargetElement \| null`Default: undefined	Pass as a JavaScript property. type: VisualMapTargetElement \| null.
sizeRange	`readonly [number, number] \| string`Default: undefined	Pass as a JavaScript property. type: readonly [number, number] \| string.
sizeDimension	`VisualMapDimension`Default: undefined	Allowed values: x, y, value, z, index. Default: undefined.
outOfRangeSize	`number`Default: undefined	Set as an HTML attribute or JavaScript property. type: number.
	`ReadonlyArray<VisualMapPieceInput> \| string`Default: undefined	Piecewise: explicit pieces (`[{ min, max, label, color }]` or `[{ value }]`; a JSON string as an attribute). Wins over `categories` / `splitNumber`.
	`ReadonlyArray<string \| number> \| string`Default: undefined	Piecewise: discrete values, one piece each (a comma list as an attribute).
	`ReadonlyArray<boolean> \| null`Default: undefined	Piecewise: the initial / controlled selection (`null` = every piece); changing it reports `selectionChanged` with source 'api'.
	`VisualMapColorInput`Default: undefined	The ramp: a scheme name (`viridis`, `blues`, `rdbu`, …), a comma list (`#eff6ff,#1d4ed8`), a colour array, or `[t, colour]` stops.
outOfRangeColor	`string`Default: '#d1d5db'	The colour of values outside the selected range (and of non-finite values).
	`VisualMapRange \| readonly [number, number] \| null`Default: undefined	The selected range (`null` / unset = the whole domain); changing it reports `rangeChange` with source 'api'.
	`(value: number) => string`Default: undefined	Label formatter (a property — functions cannot be attributes).
	`string`Default: undefined	End captions instead of the numbers: `"High,Low"` (max end first — ECharts `text`).
stepFraction	`number`Default: 0.1	Fraction of the selected range one arrow key moves (default 0.1).
minRangePx	`number`Default: 8	The narrowest selectable range, in track pixels (default 8).

Events 2

Events	Detail type	Description
	`VisualMapRangeChangeEventDetail`	Every range the control shows: a handle drag / key ('control', with `live` frames), `setRange` or the `range` prop ('api').
	`VisualMapSelectionChangeEventDetail`	CustomEvent.detail type: VisualMapSelectionChangeEventDetail. Event names are case-sensitive.

Methods 8

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

Method / Arguments	Return type	Description
	`Promise<void>`	Re-read the bound chart's extent (while `min` / `max` are unset) and push the binding; the control also does this on the chart's `rendered`.
range: VisualMapRange \| readonly [number, number] \| null	`Promise<VisualMapRange \| null>`	Select a range from script (`null` = the whole domain); reports `rangeChange` with source 'api' when it changed.
	`Promise<VisualMapRange \| null>`	An asynchronous method. Check the argument and return types below.
selected: ReadonlyArray<boolean> \| null	`Promise<boolean[] \| null>`	An asynchronous method. Check the argument and return types below.
	`Promise<boolean[] \| null>`	An asynchronous method. Check the argument and return types below.
index: number	`Promise<boolean[] \| null>`	An asynchronous method. Check the argument and return types below.
	`Promise<VisualMapSnapshot>`	The resolved spec plus the selection: continuous → domain, stops, space, out-of-range colour, calculable, precision + `range`; piecewise → the pieces + `selected`.
value: number \| string	`Promise<string>`	The colour of a value on this map: the ramp / piece colour inside the selection, `outOfRangeColor` outside it.

Visual Map.

Continuous color range

Usage and data

Data contract

Updating data

Feature examples

Add to your interface

API reference

Key properties