chart types map

Map chart

• This section describes how to create a map chart and register map data.
• You can refer to the Getting started for base installation of Toast UI Chart.

---

How to include map data

Map chart should include the map data, unlike other charts.
Map data provided by default are stored in a 'dist/maps' folder.
You should include map data(ex: dist/maps/world.js) after include libraries and chart.min.js.

If you want register custom map, refer to the bottom.

<!-- include libraries -->
<script src="bower_components/tui-code-snippet/code-snippet.min.js"></script>
<script src="bower_components/tui-component-effects/effects.min.js"></script>
<script src="bower_components/raphael/raphael-min.js"></script>
<!-- include chart.min.js -->
<script src="bower_components/tui-chart/dist/chart.min.js"></script>
<!-- include map data (only map chart) -->
<script src="bower_components/tui-chart/dist/maps/world.js"></script>

---

Data type

Data type of map chart has been affected in map data.

var rawData = {
    series: [
        {
            code: 'KR',
            data: 80,
            name: 'South Korea'
        },
        {
            code: 'JP',
            data: 70,
            labelCoordinate: {
                x: 0.6,
                y: 0.7
            }
        },
        //...
    ]
};

properties

• code: This is key for match with map data.
• name: This is label property, and overrides the attributes of map data.
• labelCoordinate: This is the coordinate property of the label, and overrides the attributes of map data.

---

Code table for map data

Map Name	File Name	Code Table Link	Sample Link
world	world.js	Code table of World map	Sample
south-korea	south-korea.js	Code table of South Korea map	Sample
usa	usa.js	Code table of USA map	Sample
china	china.js	Code table of China map	Sample
japan	japan.js	Code table of Japan map	Sample
singapore	singapore.js	Code table of Singapore map	Sample
thailand	thailand.js	Code table of Thailand map	Sample
taiwan	taiwan.js	Code table of Taiwan map	Sample

---

Creating a basic chart

Example

//...
var rawData = {
    series: [
        {
            code: 'KR',
            data: 80,
            name: 'South Korea'
        },
        //...
    ]
};
var options = {
    //...
    map: 'world'
};
tui.chart.mapChart(container, rawData, options);

---

Custom map registration and use

Custom map registration

You can register custom map by using the tui.chart.registerMap

Example

var mapData = [
    {
        code: 'MAP_CODE',
        name: 'map name',
        path: 'M835.13,346.53L837.55,350.71...', // svg path
        labelCoordinate: {
            x: 0.6,
            y: 0.7
        }
    },
    //...
];
tui.chart.registerMap('customMap', mapData);

properties

• code: This is key for match with map data.
• name: This is label property, and overrides the attributes of map data.
• path: This is svg path for drawing map.
• labelCoordinate: This is the coordinate property of the label, and overrides the attributes of map data.

Using the custom map

You can use the custom map by setting the map option.

Example

var rawData = {
    series: [
        {
            code: 'MAP_CODE',
            data: 100
        },
        //...
   ]
};
var options = {
    //...
    map: 'customMap'
}
tui.chart.mapChart(container, rawData, options);