> For the complete documentation index, see [llms.txt](https://docs.wem.io/platform/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wem.io/platform/wemtipsandtricks/widgets/advanced-charts/map-bar-morph.md). # 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](https://1449034948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-L_NpOsk0sjotPXNy29Q%2Fuploads%2Fbx7gQnFnj1q4xNqP9uFp%2Fimage.png?alt=media\&token=e819fc44-a07b-4d7a-8a23-b9d76a14fe03) ![Image 2: The bar](https://1449034948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-L_NpOsk0sjotPXNy29Q%2Fuploads%2FNIt61sCmu1HyrgHsj3d6%2Fimage.png?alt=media\&token=c6c618a9-340e-4575-8fa9-9eeb361f06d6) **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 This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.wem.io/platform/wemtipsandtricks/widgets/advanced-charts/map-bar-morph.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. 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.