Shapebar API overview

Shapebar is a part of the Diagram Editor that renders previews of Diagram items (shapes, groups and swimlanes). Use the shapebar property of the view configuration object to show, hide and configure the Shapebar. There are two ways of initialization you can choose from:

• creating the default Shapebar by using the shapebar:true setting:

const editor = new dhx.DiagramEditor("editor_container", {
    type: "default",
    view: {
        shapebar: true // displaying the default Shapebar
    }
});

• configuring Shapebar by specifying it as an object with a set of properties:

const editor = new dhx.DiagramEditor("editor_container", {
    type: "default",
    view: {
        // configuring Shapebar via an object
        shapebar: {
            css: "custom_css",
            show: true,
            width: 300,
            preview: {
               scale: 0.65,
               gap: 8
            },
            sections: {
                "Swimlane": [{ swimlane: true }],
                "Groups": [{ group: true }],   
                "Flowchart shapes": [{ flowShapes: true }],
                "Org shapes, text, topic": [{ org: true }, "text", "topic"]
            }
        }
    }
});

Check the related API section to explore the available properties of Shapebar.