# Map-Bar Morph Map morphing is an interactive visualization technique that provides a user-controlled, animated translation from one map to another. Traditionally, overlay mechanisms are used to present layers of information over a single projection. Map morphing provides a way to relate maps with significant spatial and schematic differences. {% hint style="info" %} You can find a more in-depth explanation about the map bar morph on [this ]()page: [https://echarts.apache.org/examples/en/editor.html?c=map-bar-morph]() {% endhint %} ![Image 1: The map](/files/WELctqV0QcFwSEEl6p1H) ![Image 2: The bar](/files/wz9ktyTxi11KU4eblquN) **Properties of Map-Bar Morph** | **Property Name** | **Data type** | **Type** | **Description** | | ------------------------------- | ------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | | Data Source | List | Data model | Datalist source for the widget. | | Name | Text | Expression | The name of the map area where the value belongs to, such as 'China' or 'United Kingdom' or if map type is US the State name like "Alaska" or "Florida". | | Value | Number | Expression | The value associated with the name. | | Map | Text | Dropdown | Change map template. (World, US). | | Sort bar chart values | Boolean | Expression | This property orders the values by descending order. | | Reverse sort bar chart values | Boolean | Expression | If order values is true, this property changes the values order to ascending order. | | Initial view | Text | Dropdown | Set the initial view of the map, it could be first the map and after the bar, or bar and after the map. (Map, bar). | | Interval duration | Text | Expression |

This is the time interval in which charts alternate. 0 means no animation.

Time is set on milliseconds (1 second = 1000 milliseconds)

| | Transition animation duration | Text | Expression | This is the time the transition animation takes to finish. | | Map high color | Text | Expression | Color for the higher values of the scale and map. | | Map middle color | Text | Expression |

Color for the middle values of the scale and map.

Leave empty if you only want 2 colors for the scale.

| | Map low color | Text | Expression | Color for the lower values of the scale and map. | | Use map hover | Boolean | Expression | Allow mouse hover on the map. | | Map hover color | Text | Expression | Color when the mouse is over the map area. | | Use map hover label | Boolean | Expression | Add a label on hover. | | Map hover label fontcolor | Text | Expression | Change text color for the label. | | Map hover label fontsize | Number | Expression | Change text size for the label. | | Show map hover label background | Boolean | Expression | Add a background for the hover label. | | Bar chart color | Text | Expression | Color for the bars on the bar chart. | | Use bar chart hover | Boolean | Expression | Allow mouse hover on the bar chart. | | Bar chart hover color | Text | Expression | Color when the mouse is over a bar. | | Allow zoom on bar chart | Boolean | Expression | Adds zoom to the bar chart. | | Zoom bar chart slider | Boolean | Expression | Adds zoom slider to the bar chart. | | Zoom bar chart start | Number | Expression |

Set the starting point for the zoom.

This value is based on a percentile location (1-100)

| | Zoom bar chart end | Number | Expression |

Set the ending point for the zoom.

This value is based on a percentile location (1-100)

| | Height | Number | Expression |

Set height of the chart.

Type number.

| | Width | Number | Expression |

Set width of the chart.

Type number.

| --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.wem.io/platform/wemtipsandtricks/widgets/advanced-charts/map-bar-morph.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.