Group properties

note

While specifying color values of the item, use the HEX format.

Usage

const data = [
    // group object
    {
        type: "$group",
        id?: string | number,
        x?: number,
        y?: number,
        width: number,
        height: number,
        groupChildren?: array,
        open?: boolean, // true by default
        fixed?: boolean, // false by default
        style?: {
            strokeWidth?: number, // 1 by default
            stroke?: string, // "#DEDEDE" by default
            fill?: string,
            overFill?: string,
            partiallyFill?: string
        },
        exitArea?: {
            // "unbound" by default
            groupBehavior?: "unbound" | "boundNoBorderExtension" | "boundBorderExtension", 
            padding?: number
        },
        header?: {
            height?: number, // 40 by default
            fill?: string,
            text?: string,
            fontSize?: number, // 14 by default
            lineHeight?: number, // 14 by default
            textAlign?: "left" | "center" | "right", // "center" by default
            textVerticalAlign?: "top" | "center" | "bottom", // "center" by default
            fontStyle?: "normal" | "italic" | "oblique", // "normal" by default
            fontColor?: string, // "#4C4C4C" by default
            fontWeight?: string, // "500" by default
            iconColor?: string, // "#808080" by default
            position?: "top" | "bottom" | "left" | "right", // "top" by default
            editable?: boolean, // true by default
            closable?: boolean, // false by default
            enable?: boolean // true by default
        },
        [key: string]?: any
    },
    // more group objects
];

Description

A group object contains a list of configuration properties which allow you to configure the positioning and appearance of the group:

type - (required) the type of an element, set it to "$group"
id - (optional) the unique id of a group
x - (optional) the x coordinate of the group position
y - (optional) the y coordinate of the group position
width - (required) the width of the group, including its header (position: left/right)
height - (required) the height of the group, including its header (position: top/bottom)
groupChildren - (optional) an array with ids of the first-level child items of the group
open - (optional) - defines whether the group is initialized in the expanded (true, default) or collapsed (false) state

tip

The open property works when a header is initialized with the closable attribute

fixed - (optional) enables/disables the ability to move and resize the group; false by default
style - (optional) an object with the style settings of the group. The object can contain the following attributes:
- strokeWidth - (optional) the width of the group border, 1 by default
- stroke - (optional) the color of the border of the group, "#DEDEDE" by default
- fill - (optional) the background color of the group
- overFill - (optional) the background color of the group when the user is holding the item and moving it into/outside the group providing that the whole item is inside the group
- partiallyFill - (optional) the background color of the group when the user is holding the item and moving it into/outside the group providing that a part of the item is out of the group and other settings are not defined via the exitArea attribute
exitArea - (optional) an object with the settings which will be applied to the item when the user is dragging it out of the group (is applied only to the first-level children of the group). The object can contain the following attributes:
- groupBehavior - (optional) the behavior of the child item of the group when the user is moving it out of the group:
  - "unbound" (by default) - the user can move an item into or outside the group
  - "boundNoBorderExtension" - the user can move an item into the group but cannot drag the item outside the group if the item has been dropped inside the group. The item won't expand the borders of the group when trying to drag the item outside the group
  - "boundBorderExtension" - the user can move an item into the group but cannot drag the item outside the group if the item has been dropped inside the group. The item will expand the borders of the group when trying to drag the item outside the group
    Related sample: Diagram editor. Default mode. Groups and shapes interaction
- padding - (optional) defines the padding between the group and the edge of the item when moving the item inside the group
tip
The padding attribute is available if groupBehavior: "boundNoBorderExtension" | "boundBorderExtension"
header - (optional) an object with configuration attributes of the header of the group. The attributes are:
- height - (optional) the height of the header, 40 by default
- fill - (optional) the background color of the header
- text - (optional) the text to be rendered in the header
- fontSize - (optional) the size of the font in pixels, 14 by default
- lineHeight - (optional) the height of a line, 14 by default
- textAlign - (optional) the alignment of text in the header: "left", "center"(default), "right"
- textVerticalAlign - (optional) the vertical alignment of text in the header: "top", "center"(default), "bottom"
- fontStyle - (optional) the style of the text font: "normal" (default), "italic", "oblique"
- fontColor - (optional) the color of the text font, "#4C4C4C" by default
- fontWeight - (optional) the text font weight, possible values are: "normal", "bold", "bolder", "lighter", values "100"-"900", where "400" is the same as normal, and "600"+ is the boldest font; "500" by default
- iconColor - (optional) the color of the icon of the header, "#808080" by default
- position - (optional) the positioning of the group header: "top" (default) | "bottom" | "left" | "right"
- editable - (optional) enables/disables the ability to edit the text of the header by double-clicking on it; true by default
- closable - (optional) shows/hides an icon intended to expand/collapse a group; false by default
- enable - (optional) shows/hides the header of the group; true by default
key - (optional) your own property with your own logic to be implemented under the hood

Example

const data = [    
    {
        type: "$group",
        id: 1,
        width: 400,
        height: 200,
        x: 0,
        y: 0,
        header: {
            text: "Top and collapsed header with tеxt alignment",
            editable: true,
            closable: true,
            textAlign: "left", // "left", "center", "right"
            textVerticalAlign: "center", // "top", "center", "bottom"
        },
      	// the child items of the group
        groupChildren: [1.1, 1.2],
        open: false
    },
  	// configuring shapes to put into the group
    { type: "rectangle", id: 1.1, x: 50, y: 75, text: "Shape 1.1" },
    { type: "rectangle", id: 1.2, x: 200, y: 75, text: "Shape 1.2" }
];

Related article: Configuring groups

Properties specific for "project" object

The "project" object is used as a container for tasks and milestones. It works as a group, allows creating PERT charts of various nesting levels, and provides visual grouping.

Usage

const data = [
    // project object
    {
        type: "project",
        id: string | number,
        parent?: string | number | null,
        text?: string, // will set the header.text property
        open?: boolean,

        // generated automatically
        x?: number,
        y?: number,
        width?: number,
        height?: number,
        groupChildren?: (string | number)[],
        style?: {
            fill?: string, // "#20B56D08" by default
            stroke?: string, // "#20B56D33" by default
            borderStyle?: string, // "dashed" by default
        },
        header?: {
            height?: number, // 40 by default
            text?: string, // generated automatically by the text property
            closable?: boolean, // false by default
            enable?: boolean, // true by default
            fill?: string // "inherit" by default
        }
    },
    // more project objects
]

Description

When preparing a data set for a "project" object, you can use the following configuration properties:

type - (required) the type of an element, set it to "project"
id - (optional) the unique id of a project
parent - (optional) the id of a project parent
text - (optional) the description of a project
open - (optional) defines whether the project is initialized in the expanded (true, default) or collapsed (false) state

The properties below are generated automatically. They are calculated during the rendering and shouldn't be specified manually.

x - (optional) the x coordinate of the project position
y - (optional) the y coordinate of the project position
width - (required) the width of the project, including its header (position: left/right)
height - (required) the height of the project, including its header (position: top/bottom)
groupChildren - (optional) an array with ids of the first-level child items of the project
style - (optional) an object with the style settings of the project. The object can contain the following attributes:
- fill - (optional) the background color of the project
- stroke - (optional) the color of the border of the project
- borderStyle - (optional) the style of the project border
header - (optional) an object with configuration attributes of the header of the project. The attributes are:
- height - (optional) the height of the header, 40 by default
- text - (optional) the text to be rendered in the header (generated automatically by the text property)
- closable - (optional) shows/hides an icon intended to expand/collapse a group; false by default
- enable - (optional) shows/hides the header of the project; true by default
- fill - (optional) the background color of the header

Example

const data = [
    { 
        "id": "4.2", 
        "text": "QA Testing", 
        "type": "project", 
        "parent": "4", 
        "start_date": new Date(2026, 1, 18), 
        "duration": 3, 
        "progress": 0, 
        "open": true 
    },
    { 
        "id": "4.2.1", 
        "text": "Functional Testing", 
        "type": "task", 
        "parent": "4.2", 
        "start_date": new Date(2026, 1, 18), 
        "duration": 2 
    },
    { 
        "id": "4.2.2", 
        "text": "Usability Testing", 
        "type": "task", 
        "parent": "4.2", 
        "start_date": new Date(2026, 1, 20), 
        "duration": 1
    }
];

Related article: Grouping shapes in the PERT mode

Usage​

Description​

Example​

Properties specific for "project" object​

Usage​

Description​

Example​

Usage

Description

Example

Properties specific for "project" object

Usage

Description

Example