React Diagram - defaultItemProperties

The component applies default property values to newly created items if you do not specify the values.

$(function() {
    $("#diagram").dxDiagram({
        nodes: {
            //...
        },
        defaultItemProperties: {
            connectorLineStart: "outlinedTriangle",
            connectorLineEnd: "none",
            connectorLineType: "straight",
            style: "fill: #d9d9d9; stroke: #999999",
            textStyle: "font-weight: bold; text-decoration: underline"
        }
    });
});

+
<dx-diagram #diagram id="diagram">
    <dxo-nodes ... />
    <dxo-default-item-properties 
        connectorLineStart="outlinedTriangle" 
        connectorLineEnd="none" 
        connectorLineType="straight" 
        style="fill: #d9d9d9; stroke: #999999" 
        textStyle="font-weight: bold; text-decoration: underline">
    </dxo-default-item-properties>
</dx-diagram>

<DxDiagram
    id="diagram"
    ref="diagram"
>
    <DxNodes ... >
    <DxDefaultItemProperties 
        :connector-line-start="'outlinedTriangle'" 
        :connector-line-end="'none'" 
        :connector-line-type="'straight'" 
        :style="'fill: #d9d9d9; stroke: #999999'" 
        :text-style="'font-weight: bold; text-decoration: underline'"/>
</DxDiagram>

<Diagram id="diagram">
    <Nodes ... />
    <DefaultItemProperties 
        connectorLineStart="outlinedTriangle" 
        connectorLineEnd="none" 
        connectorLineType="straight" 
        textStyle="font-weight: bold; text-decoration: underline"/>
</Diagram>

The connectorLineEnd property specifies a tip that is displayed at a connector's end point if the toLineEndExpr property does not provide another value.

The connectorLineStart property specifies a tip that is displayed at a connector's start point if the fromLineEndExpr property does not provide another value.

The connectorLineType property specifies a type of a connector if the lineTypeExpr property does not provide another value.

The shapeMaxHeight property specifies the maximum height of a shape if the maxHeight property does not provide another value.

The shapeMaxWidth property specifies the maximum width of a shape if the maxWidth property does not provide another value.

The shapeMinHeight property specifies the minimum height of a shape if the minHeight property does not provide another value.

The shapeMinWidth property specifies the minimum width of a shape if the minWidth property does not provide another value.

The style property specifies the style applied to a shape/connector if the nodes.styleExpr/edges.styleExpr property does not provide another value.

The style settings can be specified in the following ways:

• as inline style declaration, for instance "fill: #d9d9d9; stroke: #999999",
• as CSS rules presented in JSON format, , for instance {"fill": "#d9d9d9", "stroke": "#999999"}.

The textStyle property specifies a text style that is applied to a shape/connector if the nodes.textStyleExpr/edges.textStyleExpr property does not provide another value.

The style settings can be specified in the following ways:

• as inline style declaration, for instance "font-weight: bold; text-decoration: underline",
• as CSS rules in JSON format, for instance { "font-weight": "bold", "text-decoration": "underline" }.