chart

Docs › Chart types

Korea map charts: provinces, 시군구 districts and tile maps

@82chart/map-kr: Korea choropleth maps of the provinces (16 since the July 2026 merger, or the 17 before) and the 시군구 districts, plus a tile map. Names and codes matched for you, rank and share in tooltips, SSR. Free, MIT.

A choropleth map colors each region by its value, darker for more, so you see at a glance where a number is high or low. It suits statistics by region: population by province, sales by region, requests by district.

Korea maps in 82chart come as a separate package on top of the core, @82chart/map-kr. The province and 시군구 (city, county and district) boundaries ship inside it, so there is no GeoJSON to find; the data only names regions, as 'Seoul', '서울' or an administrative code. Tooltips, keyboard, export, the table view and server rendering work as on any other 82chart.

npm i @82chart/core @82chart/map-kr
import { createMapChart } from '@82chart/map-kr';
import '@82chart/core/styles.css';

createMapChart('#map', {
  title: 'Population by province',
  data: { series: [{ name: 'Population', data: [{ x: 'Seoul', y: 9310000 }, { x: 'Gyeonggi', y: 13720000 } /* … */] }] },
});

// with the core createChart, register the types once
import { createChart, use } from '@82chart/core';
import { koreaMap } from '@82chart/map-kr';
use(koreaMap); // 'map', 'tilemap'
createChart('#map', { type: 'map', data });

// 시군구 maps (map.level: 'sigungu') need one more import, the district boundaries
import '@82chart/map-kr/sigungu';

Below is the population of the 16 provinces (sample figures). Hover a region, or focus the chart and use the arrow keys: the tooltip shows the value, the rank (out of 16) and the share of the total. Ulleungdo and Dokdo sit in a dashed inset, with Dokdo drawn a little larger than life so it can be seen.

Live example

Code for this example

createChart('#chart', {
  type: 'map',
  title: 'Population by province',
  subtitle: 'September 2026, sample data',
  footnote: 'Boundaries: Statistics Korea SGIS, vuski/admdongkor (CC BY 4.0)',
  data: {
    series: [{
      name: 'Population',
      data: [
        { x: 'Seoul', y: 9310000 }, { x: 'Busan', y: 3240000 }, { x: 'Daegu', y: 2350000 }, { x: 'Incheon', y: 3040000 },
        { x: 'Daejeon', y: 1440000 }, { x: 'Ulsan', y: 1090000 }, { x: 'Sejong', y: 392000 }, { x: 'Gyeonggi', y: 13720000 },
        { x: 'Gangwon', y: 1510000 }, { x: 'Chungbuk', y: 1590000 }, { x: 'Chungnam', y: 2140000 }, { x: 'Jeonbuk', y: 1720000 },
        { x: 'Jeonnam-Gwangju', y: 3170000 }, { x: 'Gyeongbuk', y: 2510000 }, { x: 'Gyeongnam', y: 3220000 }, { x: 'Jeju', y: 668000 },
      ],
    }],
  },
});

Data format

  • A region is { x: 'Seoul', y: 9310000 }; labels: ['Seoul', 'Busan'] with plain numbers works too.
  • Regions missing from the data, and null values, are gray with "No data" in the tooltip.
  • Colors are shades of one hue (map.color, the first series color by default). With negative and positive values together, the map uses two hues around zero (see the tile map below).
  • Names are written where they fit. map.labels shows the value instead, or both.

16 or 17 provinces (the Gwangju–Jeonnam merger)

On 1 July 2026 Gwangju Metropolitan City and South Jeolla merged into 전남광주통합특별시 (Jeonnam-Gwangju), leaving 16 provinces. The default, regions: 'auto', reads the data: if it names Gwangju or Jeonnam on their own the map shows the 17 provinces of before, otherwise the 16 of today, with Jeonnam-Gwangju drawn as one region from both old outlines.

The figures below are from the end of 2025, with Gwangju and Jeonnam apart, so the map has 17 provinces without any setting (names and values both shown).

Live example

Code for this example

createChart('#chart', {
  type: 'map',
  title: 'Population by province (end of 2025)',
  subtitle: 'Gwangju and Jeonnam on their own: drawn as 17 provinces',
  footnote: 'Boundaries: Statistics Korea SGIS, vuski/admdongkor (CC BY 4.0)',
  map: { labels: 'both' },
  data: {
    series: [{
      name: 'Population',
      data: [
        { x: 'Seoul', y: 9330000 }, { x: 'Busan', y: 3260000 }, { x: 'Daegu', y: 2360000 }, { x: 'Incheon', y: 3030000 },
        { x: 'Gwangju', y: 1400000 }, { x: 'Daejeon', y: 1440000 }, { x: 'Ulsan', y: 1090000 }, { x: 'Sejong', y: 390000 },
        { x: 'Gyeonggi', y: 13700000 }, { x: 'Gangwon', y: 1520000 }, { x: 'Chungbuk', y: 1590000 }, { x: 'Chungnam', y: 2130000 },
        { x: 'Jeonbuk', y: 1750000 }, { x: 'Jeonnam', y: 1790000 }, { x: 'Gyeongbuk', y: 2540000 }, { x: 'Gyeongnam', y: 3250000 },
        { x: 'Jeju', y: 670000 },
      ],
    }],
  },
});
  • map: { regions: 16 } or regions: 17 fixes either one.
  • With 17 fixed, a '전남광주' value has no region to go to; it is left out with a console warning.
  • To show 17-province statistics on the 16-province map, add up Gwangju and Jeonnam into one 'Jeonnam-Gwangju' row.

Names and codes it understands

KindExamples
Short name서울, 경기, 전남광주
Official name서울특별시, 강원특별자치도, 전남광주통합특별시
Former name강원도, 전라북도, 서울시
EnglishSeoul, Gyeonggi-do, Jeonnam-Gwangju
Administrative code11, 1100000000 (10 digits: the first two pick the province), former codes 42 (Gangwon) and 45 (Jeonbuk)
시군구종로구, 서울 중구, 서울특별시 중구, the 5-digit code 11110, 수원시 or 수원시 장안구 (Korean names or codes)

Spaces, dots and case do not matter. A name that is not understood is not drawn and leaves a console warning, so if the map looks empty, check the browser console first.

시군구 maps and focus

map: { level: 'sigungu' } draws the 시군구 boundaries. They are a bigger file (about 21 KB gzipped) and load on their own: import '@82chart/map-kr/sigungu'. focus fits one province to the chart; below, the 25 districts of Seoul.

Live example

Code for this example

createChart('#chart', {
  type: 'map',
  title: 'Population of Seoul by district',
  subtitle: '25 districts, sample data',
  footnote: 'Boundaries: Statistics Korea SGIS, vuski/admdongkor (CC BY 4.0)',
  map: { level: 'sigungu', focus: 'Seoul' },
  data: {
    series: [{
      name: 'Population',
      data: [
        { x: '종로구', y: 139000 }, { x: '중구', y: 121000 }, { x: '용산구', y: 210000 }, { x: '성동구', y: 281000 }, { x: '광진구', y: 336000 },
        { x: '동대문구', y: 346000 }, { x: '중랑구', y: 381000 }, { x: '성북구', y: 427000 }, { x: '강북구', y: 282000 }, { x: '도봉구', y: 301000 },
        { x: '노원구', y: 492000 }, { x: '은평구', y: 456000 }, { x: '서대문구', y: 306000 }, { x: '마포구', y: 361000 }, { x: '양천구', y: 431000 },
        { x: '강서구', y: 556000 }, { x: '구로구', y: 396000 }, { x: '금천구', y: 226000 }, { x: '영등포구', y: 376000 }, { x: '동작구', y: 377000 },
        { x: '관악구', y: 486000 }, { x: '서초구', y: 405000 }, { x: '강남구', y: 556000 }, { x: '송파구', y: 654000 }, { x: '강동구', y: 471000 },
      ],
    }],
  },
});

focus works on the province map too, and takes several provinces, as in ['Busan', 'Ulsan', 'Gyeongnam'].

Cities with districts by the city name

Cities split into 구, such as 수원시 (four), 성남시, 고양시 or 용인시, can be named by the city alone: '수원시' colors all of its 구 as one region. With figures per 구, name them: '수원시 장안구'. Below, the 31 cities and counties of Gyeonggi.

Live example

Code for this example

createChart('#chart', {
  type: 'map',
  title: 'Gyeonggi by city and county',
  subtitle: 'Cities with 구 (수원시, 성남시 …) by the city name',
  footnote: 'Boundaries: Statistics Korea SGIS, vuski/admdongkor (CC BY 4.0)',
  map: { level: 'sigungu', focus: 'Gyeonggi', color: '#0e9f6e' },
  data: {
    series: [{
      name: 'Population',
      data: [
        { x: '수원시', y: 1190000 }, { x: '용인시', y: 1080000 }, { x: '고양시', y: 1070000 }, { x: '화성시', y: 960000 }, { x: '성남시', y: 910000 },
        { x: '부천시', y: 770000 }, { x: '남양주시', y: 730000 }, { x: '안산시', y: 620000 }, { x: '평택시', y: 600000 }, { x: '안양시', y: 540000 },
        { x: '시흥시', y: 520000 }, { x: '파주시', y: 510000 }, { x: '김포시', y: 490000 }, { x: '의정부시', y: 460000 }, { x: '광주시', y: 390000 },
        { x: '하남시', y: 330000 }, { x: '광명시', y: 280000 }, { x: '군포시', y: 260000 }, { x: '양주시', y: 250000 }, { x: '오산시', y: 230000 },
        { x: '이천시', y: 220000 }, { x: '안성시', y: 190000 }, { x: '구리시', y: 180000 }, { x: '의왕시', y: 160000 }, { x: '포천시', y: 140000 },
        { x: '양평군', y: 120000 }, { x: '여주시', y: 110000 }, { x: '동두천시', y: 90000 }, { x: '과천시', y: 80000 }, { x: '가평군', y: 60000 },
        { x: '연천군', y: 40000 },
      ],
    }],
  },
});

Tile map

type: 'tilemap' gives every province one tile of the same size, roughly where it lies, so small Seoul, Sejong and Daejeon read as well as large Gyeongbuk: use it when comparing values matters more than area. On the 16-province map Jeonnam-Gwangju is two tiles wide. This one has negative and positive values, so it uses two hues; deltaColors: 'korea' makes growth red and decline blue.

Live example

Code for this example

createChart('#chart', {
  type: 'tilemap',
  title: 'Population change by province',
  subtitle: 'On a year earlier, sample data',
  unit: '%',
  deltaColors: 'korea',
  data: {
    series: [{
      name: 'Change',
      data: [
        { x: 'Seoul', y: -0.5 }, { x: 'Busan', y: -0.9 }, { x: 'Daegu', y: -0.7 }, { x: 'Incheon', y: 0.9 },
        { x: 'Daejeon', y: -0.2 }, { x: 'Ulsan', y: -0.6 }, { x: 'Sejong', y: 1.4 }, { x: 'Gyeonggi', y: 0.6 },
        { x: 'Gangwon', y: -0.4 }, { x: 'Chungbuk', y: 0.1 }, { x: 'Chungnam', y: 0.4 }, { x: 'Jeonbuk', y: -1.1 },
        { x: 'Jeonnam-Gwangju', y: -0.8 }, { x: 'Gyeongbuk', y: -0.9 }, { x: 'Gyeongnam', y: -0.7 }, { x: 'Jeju', y: -0.3 },
      ],
    }],
  },
});

map.tiles moves tiles. Keys are province names or codes: tiles: { Jeju: [1, 4] } or tiles: { '50': [1, 4] }.

Options (map)

OptionDefaultWhat it does
level'sido''sido' provinces, 'sigungu' districts (after importing @82chart/map-kr/sigungu)
regions'auto'16 today's provinces, 17 with Gwangju and Jeonnam apart; 'auto' is 17 when the data names either on its own
focus–Draw only these provinces, fitted to the chart: 'Seoul' or ['Busan', 'Ulsan'] (names or codes)
min, maxthe data's min and maxEnds of the color ramp; from 0 when every value is positive
colorfirst series colorThe hue of a one-hue map
schemeauto'sequential' one hue, 'diverging' two hues around 0 (deltaColors); diverging when the data has both signs
labelsmap 'name', tile map 'both''name', 'value', 'both' or false; names that do not fit are left out
legendtrueThe color key below the map
tiles–Tile positions on the tile map, { name or code: [column, row] }

Other options (title, unit, theme, palette, height, language, table, …) work as on any chart. The height follows the map's shape; a given height fits the map inside it.

What comes with it

  • Tooltips: the region, its value, its rank (e.g. 2 / 16) and its share of the total; the pointer finds regions by their real outline.
  • Keyboard: focus the chart and the arrow keys step through the regions north to south, west to east. Screen readers hear the number of regions and the highest and lowest.
  • Export: PNG, SVG, CSV and Excel (xlsx); CSV, xlsx and the table view have region, code and value columns.
  • Language: on English pages (language: 'en') province names are in English (Seoul, Gyeonggi); 시군구 names stay in Korean.
  • Server rendering: use(koreaMap) with renderToSVG from @82chart/core/server makes map SVGs without a DOM, for reports, OG images and email.
  • Only what you use: with @82chart/core/lite, register just use(map) or use(tilemap) (Import only the charts you use).

Script tag (82chart-map-kr.min.js)

Load 82chart-map-kr.min.js (about 15 KB gzipped) after 82chart.min.js and the global Chart82 gets map and tilemap. For 시군구 maps add 82chart-map-kr-sigungu.min.js (about 21 KB gzipped) after it. On jsDelivr the package is @82chart/map-kr@0.6.0; on 82chart.com the files sit in the same /cdn/v0.6.0/ folder (CDN), and the offline zip holds both.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@82chart/core@0.6.0/dist/cdn/82chart.css">
<script src="https://cdn.jsdelivr.net/npm/@82chart/core@0.6.0/dist/cdn/82chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@82chart/map-kr@0.6.0/dist/cdn/82chart-map-kr.min.js"></script>
<!-- only for 시군구 maps -->
<script src="https://cdn.jsdelivr.net/npm/@82chart/map-kr@0.6.0/dist/cdn/82chart-map-kr-sigungu.min.js"></script>
<!-- or: https://82chart.com/cdn/v0.6.0/82chart-map-kr.min.js, https://82chart.com/cdn/v0.6.0/82chart-map-kr-sigungu.min.js -->

<div id="map"></div>
<script>
  Chart82.createChart('#map', { type: 'map', data: { series: [{ data: [{ x: 'Seoul', y: 9310000 }] }] } });
</script>

Boundary data and attribution

Map boundaries: the administrative-dong boundaries of Statistics Korea's SGIS (Statistical Geographic Information Service; KOGL Type 1), processed by vuski/admdongkor (CC BY 4.0, https://github.com/vuski/admdongkor) and simplified by 82chart. As of 2026-10-01.

The code is MIT and the boundaries are CC BY 4.0, so both are free in commercial products. CC BY 4.0 asks you to credit the source where the map is shown; one line in footnote, as in the examples, is the simplest way. The details are in the package's DATA-LICENSE.md.

Frequently asked questions

Can 82chart draw a map of Korea?

Yes, since 0.6: the separate package @82chart/map-kr draws province maps (choropleths), 시군구 district maps and a tile map. The boundaries ship in the package, so there is no GeoJSON to find; the data names regions ('Seoul', '서울') or gives administrative codes. It is MIT like the core.

How are Gwangju and Jeonnam drawn after the merger?

Since 1 July 2026 they are one province, 전남광주통합특별시. The default (regions: 'auto') draws the 17 provinces of before when the data has Gwangju and Jeonnam apart, and today's 16, with Jeonnam-Gwangju as one region, otherwise. Older and current statistics draw with the same code; map.regions: 16 or 17 fixes one.

What about district names found in several provinces (중구, 동구)?

Add the province ('서울 중구'), use the 5-digit 시군구 code (11140), or set map.focus. A name that cannot be placed is skipped with a console warning listing the candidates.

Is the map data free for commercial use?

Yes. The code is MIT; the boundaries are Statistics Korea SGIS data (KOGL Type 1) processed by vuski/admdongkor (CC BY 4.0). CC BY 4.0 asks for a one-line credit where the map is shown (footnote).

Are there world maps or 읍면동 (neighborhood) maps?

No: Korea's provinces and 시군구, and the province tile map. For world maps or smaller units, a library that draws your own GeoJSON, such as EC●●rts, fits better.