Tilemap.

COMMUNITY

Compare locations and values using equally sized tiles.

<sy-tilemap>Installation and integration API reference

LIVE EXAMPLE

Normalized regions

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

Tile shapeStepLabel color

Show labelsColor legend

Legend and interaction11

Legend positionAnimation duration (ms)Animation easingAnimation triggerTooltip triggerSimultaneous tooltipsDrag to zoom

Show tooltipAnimationDraggable tooltipTooltip connector

Title and dimensions3

Chart titleChart subtitleChart height (px)

Compare values using equally sized tiles on a coordinate grid. 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-tilemap.js';
  define0();

  const specs = [
    {
      "id": "example-chart",
      "tag": "sy-tilemap",
      "props": {
        "engine": "standard",
        "data": [
          {
            "x": 0,
            "y": 0,
            "name": "Zone 1",
            "label": "1",
            "value": 20
          },
          {
            "x": 1,
            "y": 0,
            "name": "Zone 2",
            "label": "2",
            "value": 33
          },
          {
            "x": 2,
            "y": 0,
            "name": "Zone 3",
            "label": "3",
            "value": 46
          },
          {
            "x": 3,
            "y": 0,
            "name": "Zone 4",
            "label": "4",
            "value": 59
          },
          {
            "x": 4,
            "y": 0,
            "name": "Zone 5",
            "label": "5",
            "value": 72
          },
          {
            "x": 0,
            "y": 1,
            "name": "Zone 6",
            "label": "6",
            "value": 85
          },
          {
            "x": 1,
            "y": 1,
            "name": "Zone 7",
            "label": "7",
            "value": 98
          },
          {
            "x": 2,
            "y": 1,
            "name": "Zone 8",
            "label": "8",
            "value": 31
          },
          {
            "x": 3,
            "y": 1,
            "name": "Zone 9",
            "label": "9",
            "value": 44
          },
          {
            "x": 4,
            "y": 1,
            "name": "Zone 10",
            "label": "10",
            "value": 57
          },
          {
            "x": 0,
            "y": 2,
            "name": "Zone 11",
            "label": "11",
            "value": 70
          },
          {
            "x": 1,
            "y": 2,
            "name": "Zone 12",
            "label": "12",
            "value": 83
          },
          {
            "x": 2,
            "y": 2,
            "name": "Zone 13",
            "label": "13",
            "value": 96
          },
          {
            "x": 3,
            "y": 2,
            "name": "Zone 14",
            "label": "14",
            "value": 29
          },
          {
            "x": 4,
            "y": 2,
            "name": "Zone 15",
            "label": "15",
            "value": 42
          },
          {
            "x": 0,
            "y": 3,
            "name": "Zone 16",
            "label": "16",
            "value": 55
          },
          {
            "x": 1,
            "y": 3,
            "name": "Zone 17",
            "label": "17",
            "value": 68
          },
          {
            "x": 2,
            "y": 3,
            "name": "Zone 18",
            "label": "18",
            "value": 81
          },
          {
            "x": 3,
            "y": 3,
            "name": "Zone 19",
            "label": "19",
            "value": 94
          },
          {
            "x": 4,
            "y": 3,
            "name": "Zone 20",
            "label": "20",
            "value": 27
          }
        ],
        "tileShape": "hexagon",
        "colorAxis": "auto",
        "width": 640,
        "height": 360,
        "brandPosition": "bottom-right",
        "brandLogo": ""
      }
    }
  ];
  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', 'tilemap example chart');
    return element;
  });
  container.replaceChildren(...elements);
  const chart = elements.at(-1);
  const onEvent = event => {
    console.log('pointClick', event.detail);
  };
  chart.addEventListener('pointClick', 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('pointClick', onEvent);
    container.replaceChildren();
  }
</script>

Usage and data

Show administrative or logical regions in a normalized layout.

Tile coordinates do not represent actual geographic area or distance. Explain what the layout means.

Data contract

Property	Input format
`data`	An array of { x, y, value?, name?, label? }.
`tileShape`	The tile shape.
`colorAxis`	Continuous values can use an auto color axis.

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.

Add to your interface

The code tabs below the preview contain the full data, options, event bindings, and responsive sizing for the current example. Copy them into an app project, such as Vite, that can resolve the installed packages.

Shared sy-chart API versus direct tags

API reference

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

Key properties

Attribute / Property	Type / Default	Description
	`TilemapData`Default: []	An array of { x, y, value?, name?, label? }.
	`number`Default: 640	Chart width in pixels. Update with ResizeObserver when the container changes.
	`number`Default: 420	Chart height in pixels.
brandLogo	`string`Default: undefined	The default is the Syidax logo. With the Pro chart.branding entitlement, use none or a PNG, JPEG, or WebP data URL.
brandPosition	`'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'`Default: 'bottom-right'	The corner where the logo is anchored. Applies equally to Community and Pro, on screen and in image exports.
tileShape	`TilemapTileShape`Default: 'hexagon'	The tile shape.
	`number`Default: 2	Empty px kept between tiles.
showLabels	`boolean`Default: true	Render each tile's `label` (falling back to `name`) inside the tile when it fits.
colorAxis	`TilemapColorAxisInput`Default: undefined	Continuous values can use an auto color axis.
colorLegend	`boolean`Default: true	Show the colour-axis gradient legend under the map (on while the axis is on).
legendPosition	`TilemapLegendPosition`Default: 'bottom'	Where the legend is positioned.
labelColor	`string`Default: '#ffffff'	Set as an HTML attribute or JavaScript property. type: string.
chartTitle	`string`Default: undefined	The title inside the chart. Explain the data's unit and meaning alongside it.
chartSubtitle	`string`Default: undefined	The subtitle inside the chart.
tooltipShow	`boolean`Default: true	Whether to display the built-in tooltip.
	`TilemapTooltipInput`Default: undefined	Tooltip settings for pointer-driven values, position, and content.
	`CartesianZoomInput`Default: undefined	Settings for zooming and the visible range.
animated	`boolean`Default: false	Whether to animate initial display and data changes.
animationDuration	`number`Default: 600	Animation duration in milliseconds.
animationEasing	`TilemapEasing`Default: 'ease-out'	Allowed values: linear, ease-out, ease-in, ease-in-out. Default: 'ease-out'.
animationType	`TilemapAnimationType`Default: undefined	Allowed values: initial, update. Default: undefined.

Other properties 12

Attribute / Property	Type / Default	Description
	`TilemapPaletteName`Default: 'tableau10'	Allowed values: tableau10, tableau20, observable10, paired12, set3_12. Default: 'tableau10'.
	`ReadonlyArray<string>`Default: undefined	Pass as a JavaScript property. type: ReadonlyArray<string>.
legendFloatAlign	`'start' \| 'center' \| 'end'`Default: 'end'	`legend-position="float"`: the overlay's horizontal anchor inside the drawing rectangle.
legendFloatVerticalAlign	`'top' \| 'middle' \| 'bottom'`Default: 'top'	`legend-position="float"`: the overlay's vertical anchor inside the drawing rectangle.
legendDraggable	`boolean`Default: false	`legend-position="float"`: the floating legend can be dragged inside the chart bounds.
tooltipFormat	`(tile: TilemapResolvedTile) => string`Default: undefined	Pass as a JavaScript property. type: (tile: TilemapResolvedTile) => string.
enableMouseTracking	`boolean`Default: true	Set as an HTML attribute or JavaScript property. type: boolean.
	`TilemapEngineMode`Default: 'auto'	Renderer selection: auto, standard, or pro. Engine selection is separate from permission to use a Pro chart type.
	`TilemapUnavailableBehaviour`Default: 'fallback'	Allowed values: fallback, error, throw. Default: 'fallback'.
streamSource	`TilemapStreamSource`Default: undefined	A stream source for live data. Check the contract for the specific type.
streamWindow	`number`Default: undefined	The streaming data range to keep visible.
streamMax	`number`Default: undefined	The maximum number of streaming data points to retain.

Events 13

Events	Detail type	Description
	`TilemapRenderResult & { tier: TilemapEngineTier }`	Emits rendering results in detail when chart drawing completes.
	`TilemapPointEventDetail`	A point selection event. Read the selected data and index from CustomEvent.detail.
	`TilemapPointEventDetail \| null`	CustomEvent.detail type: TilemapPointEventDetail \| null. Event names are case-sensitive.
	`ChartPointContextMenuEventDetail<TilemapPointEventDetail>`	CustomEvent.detail type: ChartPointContextMenuEventDetail<TilemapPointEventDetail>. Event names are case-sensitive.
	`{ count: number }`	CustomEvent.detail type: { count: number }. Event names are case-sensitive.
	`{ dropped: number }`	CustomEvent.detail type: { dropped: number }. Event names are case-sensitive.
	`void`	CustomEvent.detail type: void. Event names are case-sensitive.
	`void`	CustomEvent.detail type: void. Event names are case-sensitive.
	`void`	CustomEvent.detail type: void. Event names are case-sensitive.
	`TilemapTooltipShowEventDetail`	Whether to display the built-in tooltip.
	`void`	CustomEvent.detail type: void. Event names are case-sensitive.
	`TilemapTooltipActionEventDetail`	CustomEvent.detail type: TilemapTooltipActionEventDetail. Event names are case-sensitive.
	`CartesianZoomChangeEventDetail`	Every zoom / pan change (drag, pan, wheel, pinch, keyboard, API, reset).

Methods 25

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

Method / Arguments	Return type	Description
	`Promise<TilemapRenderResult>`	An asynchronous method. Check the argument and return types below.
	`Promise<TilemapEngineTier>`	An asynchronous method. Check the argument and return types below.
datum: TilemapDatum	`Promise<number>`	An asynchronous method. Check the argument and return types below.
idOrCell: string \| number \| { x: number; y: number }	`Promise<boolean>`	An asynchronous method. Check the argument and return types below.
idOrCell: string \| number \| { x: number; y: number }, patch: Partial<TilemapDatum>	`Promise<boolean>`	An asynchronous method. Check the argument and return types below.
idOrCell: string \| number \| { x: number; y: number }, value: number	`Promise<boolean>`	An asynchronous method. Check the argument and return types below.
datum: TilemapDatum	`Promise<void>`	Map semantics: appending a datum for an occupied cell UPDATES that cell.
datums: ReadonlyArray<TilemapDatum>	`Promise<void>`	An asynchronous method. Check the argument and return types below.
count?: number	`Promise<void>`	Drops the OLDEST tiles (insertion order — a map has no value ranking).
datums: ReadonlyArray<TilemapDatum>	`Promise<void>`	An asynchronous method. Check the argument and return types below.
	`Promise<TilemapStreamSource \| undefined>`	An asynchronous method. Check the argument and return types below.
options: { duration?: number; easing?: TilemapEasing; enabled?: boolean; type?: TilemapAnimationType }	`Promise<void>`	An asynchronous method. Check the argument and return types below.
	`Promise<void>`	An asynchronous method. Check the argument and return types below.
	`Promise<void>`	An asynchronous method. Check the argument and return types below.
	`Promise<void>`	Replay the initial staggered reveal. No-op when animation is off.
cssX: number, cssY: number	`Promise<{ index: number; id: string; col: number; row: number; name: string } \| null>`	The tile under a host px position (the zoomed view is honoured: the point is taken back to the layout first).
idOrCell: string \| number \| { x: number; y: number }	`Promise<TilemapPointEventDetail \| null>`	An asynchronous method. Check the argument and return types below.
	`Promise<void>`	An asynchronous method. Check the argument and return types below.
request: CartesianZoomRequest	`Promise<CartesianZoomChangeEventDetail \| null>`	Zoom to explicit windows of the drawing (`x` / `y` as `{ min, max }` or `[min, max]` over 0..1; `null` clears that orientation).
factor: number, anchorFraction?: number	`Promise<CartesianZoomChangeEventDetail \| null>`	Scale the current windows by `factor` (< 1 zooms in) around `anchorFraction` (0..1, default centre).
delta: { x?: number; y?: number }	`Promise<CartesianZoomChangeEventDetail \| null>`	Slide the zoomed windows by a fraction of the drawing (`{ x?, y? }`); a no-op at the full extent.
	`Promise<CartesianZoomChangeEventDetail \| null>`	Back to the full extent.
	`Promise<CartesianZoomState \| null>`	The current zoom state (`null` = full extent).
request?: CartesianZoomExtentRequest	`Promise<CartesianZoomExtentDetail \| null>`	The full extent of the drawing (0..1 on both orientations, the id-less slot key).
	`Promise<ChartEngineStatus>`	Requested engine vs what runs, and why (CHART-ADD-08): always Standard (this type has no WebGPU renderer); read without side effects, never consults the license.

Tilemap.

Normalized regions

Usage and data

Data contract

Updating data

Feature examples

Circular tiles

Tile labels

Inspect values with the pointer

Drag to zoom and pan

Replay animation

Animation

Data input

Legend

Large datasets

Size

Tooltip

Zoom and pan

Context menu

Data context menu

Read coordinates and data

Overview

Streaming · Add and update live dataPRO

Add to your interface

API reference

Key properties