Skip to main content

Map Chart

This page provides information on using the Map Chart widget for data visualizations on maps. The visualizations can be used in dashboards to denote areas of interest.

Display Map Chart
Display Map Chart

Content properties​

These properties are customizable options present in the property pane of the widget, allowing users to modify the widget according to their preferences.

Data​

Map Type string​

Allows you to choose between world maps or individual continent maps for visualizing your data.

Options:

  • World
  • World with Antarctica
  • Europe
  • North America
  • South America
  • Asia
  • Oceania
  • Africa
  • USA
info

If you want to display a different Map type not listed above, like specific locations, countries, or cities, please contact the support team using the chat widget at the bottom right of this page.

Chart Data array<object>​

Allows you to display data in the chart.

Expected data structure:

[
  {
    "id": "AK",
    "value": "1.96"
  },
  {
    "id": "AL",
    "value": "2.22"
  },..
]

In this format, the id refers to the pre-defined label ID, and the value represents the corresponding value associated with that label. If a label ID has no corresponding value, the map displays grey color, to signify the absence of data.

Each Map Type has different configurations. To learn more about these charts and their specific configurations, you can refer to the Region and Country codes section.

Additionally, you can display dynamic data from queries or JS functions by binding the response to the Chart data property. For example, if you have a query named fetchData, you can bind its response using:

Example:

{{fetchData.data}}

If the query data is not in the expected format, you can use the map() function to transform it before passing it to the widget, like:

Example:

{{fetchUserData.data.map( p => ({id: p.label, value: val.count}))}}

Title string​

Sets the text that appears at the top of the chart as a title.

Visible boolean​

Controls the visibility of the widget. If you turn off this property, the widget would not be visible in View Mode. Additionally, you can use JavaScript by clicking on JS next to the Visible property to conditionally control the widget's visibility.

For example, if you want to make the widget visible only when the user selects "Yes" from a Select widget, you can use the following JavaScript expression:

{{Select1.selectedOptionValue === "Yes"}}

Show Labels boolean​

When enabled, displays labels for each data point featured on the Map chart.

Events​

onDataPointClick​

Sets the action (Framework functions, queries, or JS functions) to be executed when a user clicks on a data point in the chart.

Style properties​

Style properties allow you to change the look and feel of the widget.

General​

Color range array<object>​

Allows you to manage the color of a collection of regions based on the assigned value ranges. It accepts arrays of objects containing the following keys:

  • code: Represents the color code to be applied.
  • minValue: Indicates the minimum value where this color should be used.
  • maxValue: Indicates the maximum value where this color should be used.
  • displayValue: Display string values, overriding the numeric range.
  • alpha: Indicates the transparency level, with a maximum value of 100.

Expected data structure:

[
  {
    "minValue": 0.5,
    "maxValue": 1,
    "code": "#FFD74D"
  },
  {
    "minValue": 1,
    "maxValue": 2,
	"displayValue": "Hello",
	"alpha": 32,
    "code": "#FB8C00"
  },..
]

Border and shadow​

Border radius string​

Applies rounded corners to the outer edge of the widget. If JavaScript is enabled, you can specify valid CSS border-radius to adjust the radius of the corners.

Box Shadow string​

This property adds a drop shadow effect to the frame of the widget. If JavaScript is enabled, you can specify valid CSS box-shadow values to customize the appearance of the shadow.

Reference properties​

Reference properties are properties that are not available in the property pane but can be accessed using the dot operator in other widgets or JavaScript functions. They provide additional information or allow interaction with the widget programmatically. For instance, to get the visibility status, you can use MapChart1.isVisible.

selectedDataPoint object​

Contains an object which represents the data point that the user has most recently clicked.

Example:

//To access all the details of the selected data point:
{{MapChart1.selectedDataPoint}}

//To access the label of the selected data point:
{{MapChart1.selectedDataPoint.id}}

//To access the value of the selected data point:
{{MapChart1.selectedDataPoint.value}}

isVisible boolean​

Reflects whether the widget is visible or not.

Example:

{{MapChart1.isVisible}}

Methods​

Widget property setters enable you to modify the values of widget properties at runtime, eliminating the need to manually update properties in the editor.

These methods are asynchronous and return a Promise. You can use the .then() block to ensure execution and sequencing of subsequent lines of code in Appsmith.

setVisibility (param: boolean): Promise​

Sets the visibility of the widget.

Example:

MapChart1.setVisibility(true)

Region and country codes​

Map TypeIDValue
WORLDAFAfrica
WORLDASAsia
WORLDAUAustralia
WORLDEUEurope
WORLDNANorth America
WORLDSASouth America
WORLD_WITH_ANTARCTICAAFAfrica
WORLD_WITH_ANTARCTICAATAntarctica
WORLD_WITH_ANTARCTICAASAsia
WORLD_WITH_ANTARCTICAAUAustralia
WORLD_WITH_ANTARCTICAEUEurope
WORLD_WITH_ANTARCTICANANorth America
WORLD_WITH_ANTARCTICASASouth America
EUROPE001Albania
EUROPE002Andorra
EUROPE003Austria
EUROPE004Belarus
EUROPE005Belgium
EUROPE006Bosnia and Herzegovina
EUROPE007Bulgaria
EUROPE008Croatia
EUROPE044Cyprus
EUROPE009Czech Republic
EUROPE010Denmark
EUROPE011Estonia
EUROPE012Finland
EUROPE013France
EUROPE014Germany
EUROPE015Greece
EUROPE016Hungary
EUROPE017Iceland
EUROPE018Ireland
EUROPE019Italy
EUROPE047Kosovo
EUROPE020Latvia
EUROPE021Liechtenstein
EUROPE022Lithuania
EUROPE023Luxembourg
EUROPE024Macedonia
EUROPE025Malta
EUROPE026Moldova
EUROPE027Monaco
EUROPE028Montenegro
EUROPE029Netherlands
EUROPE030Norway
EUROPE031Poland
EUROPE032Portugal
EUROPE033Romania
EUROPE046Russia
EUROPE034San Marino
EUROPE035Serbia
EUROPE036Slovakia
EUROPE037Slovenia
EUROPE038Spain
EUROPE039Sweden
EUROPE040Switzerland
EUROPE045Turkey
EUROPE041Ukraine
EUROPE042United Kingdom
EUROPE043Vatican City
NORTH_AMERICA001Antigua and Barbuda
NORTH_AMERICA002Bahamas
NORTH_AMERICA003Barbados
NORTH_AMERICA004Belize
NORTH_AMERICA005Canada
NORTH_AMERICA026Cayman Islands
NORTH_AMERICA006Costa Rica
NORTH_AMERICA007Cuba
NORTH_AMERICA008Dominica
NORTH_AMERICA009Dominican Rep.
NORTH_AMERICA010El Salvador
NORTH_AMERICA024Greenland
NORTH_AMERICA011Grenada
NORTH_AMERICA012Guatemala
NORTH_AMERICA013Haiti
NORTH_AMERICA014Honduras
NORTH_AMERICA015Jamaica
NORTH_AMERICA016Mexico
NORTH_AMERICA017Nicaragua
NORTH_AMERICA018Panama
NORTH_AMERICA025Puerto Rico
NORTH_AMERICA019St. Kitts & Nevis
NORTH_AMERICA020St. Lucia
NORTH_AMERICA021St. Vincent & the Grenadines
NORTH_AMERICA022Trinidad & Tobago
NORTH_AMERICA023United States
SOUTH_AMERICA001Argentina
SOUTH_AMERICA002Bolivia
SOUTH_AMERICA003Brazil
SOUTH_AMERICA004Chile
SOUTH_AMERICA005Colombia
SOUTH_AMERICA006Ecuador
SOUTH_AMERICA007Falkland Islands
SOUTH_AMERICA008French Guiana
SOUTH_AMERICA015Galapagos Islands
SOUTH_AMERICA009Guyana
SOUTH_AMERICA010Paraguay
SOUTH_AMERICA011Peru
SOUTH_AMERICA016South Georgia Island
SOUTH_AMERICA012Suriname
SOUTH_AMERICA013Uruguay
SOUTH_AMERICA014Venezuela
ASIA001Afghanistan
ASIA002Armenia
ASIA003Azerbaijan
ASIA060Bahrain
ASIA005Bangladesh
ASIA006Bhutan
ASIA007Brunei
ASIA008Burma (Myanmar)
ASIA009Cambodia
ASIA010China
ASIA012East Timor
ASIA013Georgia
ASIA050Hong Kong
ASIA051India
ASIA052Indonesia
ASIA053Iran
ASIA054Iraq
ASIA055Israel
ASIA056Japan
ASIA057Jordan
ASIA058Kazakhstan
ASIA059Kuwait
ASIA060Kyrgyzstan
ASIA061Laos
ASIA062Lebanon
ASIA063Macau
ASIA064Malaysia
ASIA065Maldives
ASIA066Mongolia
ASIA067Nepal
ASIA068North Korea
ASIA069Oman
ASIA070Pakistan
ASIA071Palestine
ASIA072Philippines
ASIA073Qatar
ASIA074Saudi Arabia
ASIA075Singapore
ASIA076South Korea
ASIA077Sri Lanka
ASIA078Syria
ASIA079Taiwan
ASIA080Tajikistan
ASIA081Thailand
ASIA082Turkey
ASIA083Turkmenistan
ASIA084United Arab Emirates
ASIA085Uzbekistan
ASIA086Vietnam
ASIA087Yemen
OCEANIA001Australia
OCEANIA002Fiji
OCEANIA003Kiribati
OCEANIA004Marshall Islands
OCEANIA005Micronesia
OCEANIA006Nauru
OCEANIA007New Caledonia
OCEANIA008New Zealand
OCEANIA009Palau
OCEANIA010Papua New Guinea
OCEANIA011Samoa
OCEANIA012Solomon Islands
OCEANIA013Tonga
OCEANIA014Tuvalu
OCEANIA015Vanuatu
OCEANIA016Pitcairn Island
OCEANIA017French Polynesia
OCEANIA018Cook Island
OCEANIA019Niue
OCEANIA020American Samoa
OCEANIA021Guam
OCEANIA022North Mariana Island
AFRICA001Algeria
AFRICA002Angola
AFRICA003Benin
AFRICA004Botswana
AFRICA005Burkina Faso
AFRICA006Burundi
AFRICA007Cameroon
AFRICA008Canary Islands
AFRICA009Cape Verde
AFRICA010Central African Republic
AFRICA011Chad
AFRICA012Congo
AFRICA013Cote d'Ivoire
AFRICA014Democratic Republic of the Congo
AFRICA015Djibouti
AFRICA016Egypt
AFRICA017Equatorial Guinea
AFRICA018Eritrea
AFRICA019Ethiopia
AFRICA020Gabon
AFRICA021Gambia
AFRICA022Ghana
AFRICA023Guinea
AFRICA024Guinea-Bissau
AFRICA025Kenya
AFRICA026Lesotho
AFRICA027Liberia
AFRICA028Libya
AFRICA029Madagascar
AFRICA030Malawi
AFRICA031Mali
AFRICA032Mauritania
AFRICA033Mauritius
AFRICA034Morocco
AFRICA035Mozambique
AFRICA036Namibia
AFRICA037Niger
AFRICA038Nigeria
AFRICA039Rwanda
AFRICA040Sao Tome and Principe
AFRICA041Senegal
AFRICA042Seychelles
AFRICA043Sierra Leone
AFRICA044Somalia
AFRICA045South Africa
AFRICA046South Sudan
AFRICA047Sudan
AFRICA048Swaziland
AFRICA049Tanzania
AFRICA050Togo
AFRICA051Tunisia
AFRICA052Uganda
AFRICA053Union of Comoros
AFRICA054Western Sahara
AFRICA055Zambia
AFRICA056Zimbabwe
AFRICA057Somaliland
AFRICA058Bir Tawil