JavaScript/jQuery Diagram - Default Shape and Connector Settings

The Diagram component allows you to specify default settings for its items in the following ways:

  • Specify settings contained in the defaultItemProperties property.
  • Specify data-binding expressions contained in the edges and nodes properties to define common settings for data-bound edges and nodes.
index.js
  • $(function() {
  • $("#diagram").dxDiagram({
  • defaultItemProperties: {
  • connectorLineType: "straight",
  • style: "stroke-width: 3px",
  • },
  • nodes: {
  • // ...
  • textStyleExpr: function() {return "fill: green"},
  • },
  • edges: {
  • // ...
  • styleExpr: function() {return "stroke: red"},
  • },
  • });
  • });