ztd chartsHome

Map · Intermediate

Tile grid map

One equal tile per region, placed roughly where it is and shaded by its value.

Open in playground
Use when
Comparing one value across the regions of a country, such as a rate per province, where small regions matter as much as large ones
Avoid when
Exact borders, distances or areas matter, or the regions are not in a built-in grid and you have no layout for them

Try it

37

Tile grid map

Addresses with next-day delivery, by region (%)
Tile grid mapTile map. 16 regions with data. Highest Sejong 98%, lowest Jeju 64%, mean 83.4%.Incheon94Seoul96Gyeonggi93Gangwon71Chungnam78Sejong98Chungbuk80Gyeongbuk72Jeonbuk74Daejeon90Daegu89Ulsan86Jeonnam-Gwangju76Gyeongnam82Busan91Jeju64
Tile grid map data
Sejong98%, 1 of 16
Seoul96%, 2 of 16
Incheon94%, 3 of 16
Gyeonggi93%, 4 of 16
Busan91%, 5 of 16
Daejeon90%, 6 of 16
Daegu89%, 7 of 16
Ulsan86%, 8 of 16
Gyeongnam82%, 9 of 16
Chungbuk80%, 10 of 16
Chungnam78%, 11 of 16
Jeonnam-Gwangju76%, 12 of 16
Jeonbuk74%, 13 of 16
Gyeongbuk72%, 14 of 16
Gangwon71%, 15 of 16
Jeju64%, 16 of 16
Sejong leads at 98%Intermediate

Hover over the chart, or Tab in and use the arrow keys to move between items. The numbers are sample data.

Variants

Named looks for this chart. Each one is the example above with a few options or fields changed. The CLI (ztd-charts example tileMap --variant <id>) and the MCP server know the same names.

Three color steps

Addresses with next-day delivery, by region (%)
Sample data

Lowest value darkest

Addresses with next-day delivery, by region (%)
Sample data

Without legend

Addresses with next-day delivery, by region (%)
Sample data

Code

TileMap.tsx
import { ChartCard, TileMap } from "ztd-charts";

const data = [
  {"sido":"Seoul","rate":96},
  {"sido":"Busan","rate":91},
  {"sido":"Daegu","rate":89},
  {"sido":"Incheon","rate":94},
  {"sido":"Daejeon","rate":90},
  {"sido":"Ulsan","rate":86},
  // … 10 more rows
];

export function Example() {
  return (
    <ChartCard number="37" title="Tile grid map" subtitle="Addresses with next-day delivery, by region (%)" takeaway="Sejong leads at 98%" level="intermediate" replay>
      <TileMap
        data={data}
        region="sido"
        value="rate"
        map="kr-sido"
        unit="%"
      />
    </ChartCard>
  );
}

Props

<TileMap> takes these props. Rows marked Common work the same on every chart.

30 props

Prop
dataRequiredAn array of objects. Pass CSV, REST or database rows as they areobject[]
regionRequiredRegion name or code, matched to a tile of options.mapstring | (d, i) => string
valueRequiredValue fieldstring | (d, i) => number
mapTile grid. "kr-sido" is South Korea's 16 first-level regions from 2026-07-01, when Gwangju and Jeollanam-do merged; "kr-sido-2025" is the 17 regions before that. Or your own tiles: [{ id, label, row, col, aliases }]. The Korean grids match short and full Korean names, older names, English names and ISO 3166-2 codes such as KR-11anyDefault "kr-sido"
legendShow the color legendbooleanDefault true
legendLabelsNames at both ends of the legendstring[]
colorReverseDarkest color for the smallest value, for rankings where 1st should stand out. The default highlight moves to the smallest value toobooleanDefault false
colorStepsNumber of color steps. The legend shows each stepnumberDefault 5
labelsLanguage of region names on the Korean grids: on tiles, in the tooltip, the screen reader sentence and the table. "auto" uses the Korean short names when a matched region value in the data contains Hangul, otherwise the locale's language. Numbers and other text follow locale, and custom grids keep their own labels"auto" | "ko" | "en"Default "auto"
heightCommonHeight in px. Without it, each chart picks a default that fits its widthnumber
widthCommonFixed width in px. Without it, the chart fits its parentnumber
highlightCommonItem to highlight. An index, a name, an array, or "max" | "min" | "first" | "last" | "none"number | string | (number|string)[] | "max" …
formatCommonValue format. "number" | "integer" | "percent" (values are already percents: 42 → "42%") | "ratio" (0.42 → "42%") | "compact" | "currency" (KRW for Korean locales, otherwise USD; for another currency pass Intl options with currency) | "decimal" or Intl.NumberFormat options"number" | "percent" | "compact" | …
unitCommonUnit appended to values. For example "%" or "ms"string
localeCommonLocale for numbers, dates and the text a chart writes itself (tooltips, screen reader sentences). "ko" or "ko-*" switches to Korean. Falls back to the ThemeProvider localestringDefault "en-US"
animateCommonEntry and update animationbooleanDefault true
durationCommonAnimation length (ms)number
easingCommonMotion curve"spring" | "easeOut" | "easeInOut" | "linear"Default "spring"
staggerCommonDelay between items as they enter (ms)number
reducedMotionCommon"auto" follows the OS setting. true always turns motion offanyDefault "auto"
animateOnViewCommonPlay when the chart scrolls into viewbooleanDefault true
showLabelsCommonLabels drawn on the chart (values and names)booleanDefault true
tooltipCommonShow tooltips. { template: "{label} · {value} · owner {owner}" } writes them: {label}, {value}, {series} or any other column of the row. \n starts a new line, and a line with an empty value is left outtooltipDefault true
syncIdCommonCharts with the same syncId show the hovered x together (line, area, bar, candlestick). <ChartGrid sync> sets one for every chart inside itstring
ariaLabelCommonName for screen readersstring
descriptionCommonDescription for screen readers. Built from the data when omittedstring
onHoverCommonRuns when hover or keyboard focus moves to another item(e: ChartEvent | null) => void
onClickCommonRuns on click, Enter or Space(e: ChartEvent) => void
replayKeyCommonReplays the entry animation when it changesstring | number
themeCommonChanges theme tokens for this chart onlyPartial<ChartTheme>