Examples
Each ChartShape has a Name, its Rings of ShapePoint and an optional Group, here the rack's occupancy. KeepAspect makes a metre as long across as up.
A second ring inside a closed shape cuts a hole; Closed: false draws each ring as an open line, such as a cable run. Color takes any CSS colour and ShowGrid="false" hides the grid.
Playground
<ShapeChart
KeepAspect="true"
XTitle="Metres"
YTitle="Metres"
Title="Hall B, rack occupancy"
Shapes="@_racks" />
@code {
// Two rows of racks (0.6 m × 1.2 m) facing a cold aisle; each rack is a polygon, coloured by occupancy.
private readonly ChartShape[] _racks = Build();
private static ChartShape[] Build()
{
string[] occupancy = ["Full", "Full", "Over 50%", "Full", "Under 50%", "Over 50%", "Empty", "Full", "Over 50%", "Under 50%", "Empty", "Full"];
List<ChartShape> racks = [];
for (int i = 0; i < 12; i++)
{
int row = i / 6;
double x = 1 + (i % 6) * 0.8;
double y = row == 0 ? 1 : 3.6;
racks.Add(new ChartShape($"Rack {(row == 0 ? 'A' : 'B')}{i % 6 + 1}", [Rect(x, y, 0.6, 1.2)], Group: occupancy[i], Color: _colors[occupancy[i]]));
}
return [.. racks];
}
private static readonly Dictionary<string, string> _colors = new()
{
["Full"] = "var(--color-error)",
["Over 50%"] = "var(--color-warning)",
["Under 50%"] = "var(--color-info)",
["Empty"] = "var(--color-success)",
};
private static ShapePoint[] Rect(double x, double y, double w, double h) => [new(x, y), new(x + w, y), new(x + w, y + h), new(x, y + h)];
}API
<ShapeChart>
DaisyBlazor.ChartsParameters
- AspectRatio double= 1.78
Width divided by height. The chart keeps this shape at any width; its text keeps its size.
- KeepAspect bool= false
Keep one unit as long across as up (widening one axis), so shapes are not stretched.
- 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.
- Shapes IReadOnlyList<
ChartShape> = []The polygons and polylines to draw, back to front.
- ShowGrid bool= true
Draw grid lines across the plot at the ticks.
- ShowLegend bool= true
Show a legend when there is more than one group (or ungrouped shape).
- 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.
- Width string= "100%"
CSS width of the chart wrapper.
- XTitle string= null
Title of the horizontal axis.
- YTitle string= null
Title of the vertical axis.
- Class string= null
Additional CSS classes merged onto the w-full wrapper.
- Style string= null
Inline styles appended after the width on the wrapper.