Maps / Indicators / Data Labels

Blazor Maps Example - Data Labels

Loading Syncfusion Blazor Server Demos…
Properties

This sample demonstrates using data labels to display the names of all United States states on a map while providing configurable options for label overlap handling and smart placement. Data labels surface shape-level information directly on the map, improving readability and enabling quick identification without relying solely on tooltips.

Key configuration options shown in the sample:

  • The AutoFill property in MapsShapeSettings, which applies a default palette to shapes for consistent visual grouping.
  • Tooltip support to present supplemental details on hover or tap, keeping the map uncluttered while providing on‑demand information.
  • Smart label placement and label intersect actions that automatically reposition, hide, or trim labels to avoid overlap and preserve legibility across zoom levels.

Implementation notes: prefer semantic label text, test placement at multiple zooms, and tune intersect and collision settings to balance coverage and clarity. When using AutoFill, ensure color contrast against label text to maintain accessibility. Combine tooltips with concise labels for dense regions where labels may be suppressed.

For full implementation guidance, examples, and API details, see the data labels documentation: data labels documentation.