Skip to main content

Map Chart

Map Chart widget is useful for data visualizations on a map. The visualizations can be used in dashboards to denote areas of interest.

Properties

Properties allow you to edit the widget, connect it with other widgets and customize the user actions.

Widget Properties

These properties allow you to edit the Map chart widget. All these properties are present in the property pane of the widget. The following table lists all the widget properties.

PropertyDescription
Map typeIt lets you select the maps of the world or continents to visualize data.
TitleSets the title to be displayed on top of the map chart.
VisibleControls widget's visibility on the page. When turned off, the widget will not be visible when the app is published
DataInformation in a specified format (array \<id, value>) is to be displayed on the selected map type. To know what each id represents for a map, please refer to this documentation.
Show LabelsWhen turned on, it shows the labels for each data point on the map chart.

Binding Properties

These properties allow you to bind your Map chart widget with any other widget in queries or JS objects. The following table lists all the binding properties.

Internal PropertyDescription
selectedDataPointAn object of the currently selected data point in the map. This object changes when the user selects a different data point in the map.
isVisibleThis property indicates whether the widget is visible or not.

Events

They are a set of actions that you can perform on the widget.

EventDescription
onDataPointClickSets the action to be run when the user selects a distinct region in the map. See a list of supported actions.

Styles

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

Styles
Color rangeControls the colour of a set of regions based on the range of values assigned. Accepts arrays of objects with the following keys: code (Color code to be applied), minValue (Minimum value for which this colour should be applied), maxValue (Maximum value for which this colour should be applied).
Border RadiusAllows you to define curved corners.
Box ShadowAllows you to choose from the available shadow styles.

Displaying Data

Map chart’s options can be populated from a data source like an API / Query by transforming the incoming data to an array of \(id, value\). For each “Map type”, each unique ID represents a fixed region in the map, which can be determined from the fusion map chart documentation.

The transformation can be performed using JavaScript. So if the data is an array, we can transform it using the Array.map function.

// Query1.data is assumed to be an array here
{{ Query1.data.map((row) => {
return { id: row.name, value: row.id }
})
}}