Diagram
CompleteFlow charts and organization charts drawn as SVG. Boxes are placed automatically in levels from their connections, or at the X and Y you give. With Editable the user drags boxes or moves them with the arrow keys. Every connection is also available as text for screen readers.
Example
Parameters
| Parameter | Type | Description |
|---|---|---|
Class | string | Extra CSS classes added to the root element. |
Direction | DiagramDirection | TopDown or LeftRight. |
Edges | IEnumerable<DiagramEdge> | DiagramEdge(from, to, text) items that link node ids. |
Editable | bool | Lets the user move boxes. |
Height | Double | Maximum height of the grid body, for example 24rem (default 28rem with VirtualScroll). |
Label | string | Visible label text (charts: accessible name; IconButton: accessible name and tooltip). |
LevelSpacing | Double | Space between levels. |
Nodes | IEnumerable<DiagramNode> | DiagramNode(id, text, shape, x, y, accent) items. Shapes: Process, Decision, Data, Terminal. |
NodeSpacing | Double | Space between boxes in one level. |
NodeWidth | Double | Width of every box. |
ShowDataLabels | bool | Writes the value on each mark (bars, line points, pie slices). |
ShowExport | bool | Adds buttons that save the chart as a PNG or SVG image. |
ShowLegend | bool | Shows the clickable legend. |
Style | string | Inline style added to the root element. |
ValueFormat | string | Number format for axis and tooltips, e.g. N0 or P1. |
Width | Double | Skeleton: any CSS length. Charts: drawing width in SVG units (the chart still scales to its container). |
Events
| Event | Type | Description |
|---|---|---|
OnNodeMoved | EventCallback<DiagramNodeMove> | Raised with the id and new position of a moved box. |
Package
Diagram is part of RayCraft Complete. Package: RayCraft.Blazor.Complete. It comes from the private RayCraft feed and needs an active license. See Getting started.
Send feedbackVersion 1.0.3