data

JavaScript array containing data for the component

string|array data;

Example

const tree_data = [
    { id:"root", value:"Board of Directors"},
    { id:"1", value:"Managing Director"},
    { id:"1.1", value:"Base Manager"},
];
 
webix.ui({
    view: "diagram",
    data: tree_data,
});

Related samples

Diagram: Basic

Details

The property expects a JSON array or an XML string to load data from. If the data comes in the XML format you need to define the datatype property passing "xml" as its value.

webix.ui({
  view:"diagram",
  datatype: "xml",   data: "remote/data.xml", 
  // ...
});

Inside the data array you can provide configurations for each block individually:

// blocks dataset
[
  { 
    id:"core", 
    value:"Webix Core", 
    type:"org", 
    $css:"master", 
    x: 210, 
    y: 190, 
    width: 180, 
    height: 80 
  },
  { id:"gantt", value:"Gantt", type:"org", x: 0, y: 80 },
]

You can also refer to the item property of Diagram to style all the blocks at once.