Examples
Load the GeoJSON with HttpClient (GetFromJsonAsync<JsonElement>); Values is keyed by IdProperty, here the country name. Countries without a value get NoDataColor; the legend shows the range.
Projection picks the d3-geo projection (Equal Earth keeps areas fair); with the default IdProperty the keys are the features' GeoJSON ids. Color and NoDataColor take any CSS colour.
Playground
<ChoroplethMap
IdProperty="name"
ValueFormat="{0:N0} customers"
Title="Active customers by country"
Features="@_world"
Values="@_customers" />
@code {
private JsonElement _world;
private readonly Dictionary<string, double> _customers = new()
{
["United States of America"] = 4_820,
["Canada"] = 910,
["Mexico"] = 380,
["Brazil"] = 1_120,
["Argentina"] = 260,
["United Kingdom"] = 2_140,
["Ireland"] = 340,
["France"] = 1_760,
["Germany"] = 2_430,
["Netherlands"] = 820,
["Spain"] = 690,
["Italy"] = 610,
["Sweden"] = 450,
["Poland"] = 390,
["Nigeria"] = 210,
["Kenya"] = 140,
["South Africa"] = 330,
["India"] = 1_540,
["Japan"] = 980,
["South Korea"] = 520,
["Indonesia"] = 300,
["Australia"] = 870,
};
protected override async Task OnInitializedAsync()
{
// Static rendering runs no requests: the globe stands in until the browser loads the map.
if (!RendererInfo.IsInteractive)
{
return;
}
try
{
using HttpClient http = new() { BaseAddress = new Uri(Nav.BaseUri) };
_world = await http.GetFromJsonAsync<JsonElement>("data/world-countries-110m.json");
}
catch (Exception ex) when (ex is HttpRequestException or JsonException)
{
}
}
}API
<ChoroplethMap>
DaisyBlazor.ChartsParameters
- AspectRatio double= 1.9
Width divided by height. The chart keeps this shape at any width; its text keeps its size.
- Color string= null
CSS colour of the highest value; lower values are lighter tints of it. Defaults to the theme's primary colour.
- Features JsonElement=
The map as a GeoJSON FeatureCollection, for example from await Http.GetFromJsonAsync<JsonElement>("data/countries.json"). Each feature's key (see IdProperty), name (see NameProperty) and geometry are sent to the layout, nothing else; they are extracted again only when a different document is passed.
- IdProperty string= "id"
The property that keys Values: a property of the feature's properties, else the feature's own member of that name (the GeoJSON id by default).
- NameProperty string= "name"
The feature property shown as its name in the tooltips; the key when it is missing.
- NoDataColor string= null
CSS colour of features without a value. Null (the default) hatches them with faint diagonal lines of the text colour, which stays distinct from the lightest value tint in light and dark themes; the legend's "No data" key shows the same.
- Projection MapProjection= MapProjection.NaturalEarth
How the globe is flattened. The projection is always fitted to the features.
- RowHeight double?= null
Height of each row in px, for a chart that lays its categories out as rows (horizontal bars, a Gantt's lanes, a heatmap's rows…): its height then follows its number of rows instead of AspectRatio, so a long list keeps readable rows at any width. A chart, or an orientation, without rows ignores it.
- ShowLegend bool= true
Show the colour scale (lowest to highest value) under the map.
- ShowTitle bool= true
Draw Title as a visible heading above the chart (the default); false keeps it only as the chart's accessible name, for a chart inside a card that already has a heading.
- Title string= null
Optional heading rendered above the chart; it is also the chart's accessible name.
- ValueFormat string= "{0:#,0.##}"
Format string for values in the legend and tooltips, e.g. "{0:N0} customers".
- Values IReadOnlyDictionary<
string, double> = []The value of each feature, keyed like IdProperty. A feature without a finite value is hatched, or filled with NoDataColor.
- Width string= "100%"
CSS width of the chart wrapper.
- Class string= null
Additional CSS classes merged onto the w-full wrapper.
- Style string= null
Inline styles appended after the width on the wrapper.