Map Svg

The SVG Map Chart is a data visualization component that maps data values onto custom SVG-based maps. It supports heatmaps, tooltips, drilldowns, and flexible positioning and scaling of the SVG map within the chart area. Ideal for visualizing geospatial, regional, or shape-based data representations.

Key Features:

• Visualizes numeric data over custom SVG maps.
• Supports heatmap color scaling via ECharts VisualMap.
• Interactive tooltip display with customizable formatting.
• Configurable SVG size, positioning, and map names.
• Performance-optimized rendering with optional animations.

Use Cases:

• Regional sales performance.
• Custom geographical maps (district, zone, territory).
• Visualizing supply chain networks or logistics regions.
• Any non-geographical shape-based data mapping.

Note

Suitable for geospatial or custom-shape visualizations driven by region labels or shape names in your dataset.

---

⚙️ Setup

1. Drag the Map SVG Chart widget from the chart library onto your designer workspace.
2. Select the chart.
3. Go to the Widget Configuration tab in the Customize panel.
4. Under the Configuration tab, select the Basic Configuration option to access the essential settings for the map svg chart.
5. Select the Source which the chart will pull the data from the option.
6. Map:
   • Measure — Numerical value determining symbol size.
   • Dimension — Categorical field for horizontal grouping.
7. Optionally add a Date field for time-based filtering.
8. Enable Hide Zero Values to omit symbols with zero values if needed.

---

📊 Basic Configuration

Configuration Item	Description
Source	Source providing the data for measures and dimensions.
Measure	Numeric value to visualize per region/shape.
Dimension	Name of the region/shape in the SVG file.

---

🎨 Chart Customizations

Category	Options & Description
General	Modify the chart’s general appearance, including the background color, borders, shadows, and drill-out choices.
Title	Enable and customize chart title text, alignment, font, and color.
HeatMap	Configure a visual color map to represent value intensity with a gradient.
Position	Horizontal and vertical alignment.
Series	Label visibility, overlap settings, and color behaviors.
Tooltip	Tooltip content, formatting, and styling.
Others	Map name selection and map size percentage.

---

📊 Example Visualization