Stencil Label not rendering

[gordon-brown]

Introduction

I want to add a descriptive header at the top a stencil. I am setting the label property of the stencil, but it is not rendering. See stencil code below. The label property is described as "A string or HTML Element rendered at the top of the stencil. It defaults to Stencil."

    let stencil = this.stencil = new ui.Stencil({
        label: "Pallets",
        paper: paperScroller,
        dropAnimation: true,
        layout: {
            columns: 2,
            rowHeight: 'compact',
            rowGap: 10,
            columnGap: 20,
            columnWidth: 100,
            marginY: 10,
            marginX: 10,
            resizeToFit: false,
            dx: 10,
            dy: 20,
        },
        groups: {
            group1: { label: 'Shapes In Use', index: 1, closed: false, height: 80},
            group2: { label: 'Favorites', index: 2, closed: false, height: 80},
            group3: { label: 'BPMN', index: 3, closed: false },
            group4: { label: 'Flowchart', index: 4, closed: true },
            group5: { label: 'Clipart', index: 5, closed: true },
            group6: { label: 'Callouts', index: 6, closed: true },
            group7: { label: 'Uploaded Images', index: 7, closed: true },
        },
        search: {
            '*': ['attrs/text/text'],
            'basic.Image': ['description'],
            'basic.Path': ['description']
        }            
    });   

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS

[kumilingus]

The label is shown only if groupsToggleButtons option is set to true.
This needs to be either reflected in the documentation or fixed.

Note that you can add a label in HTML in the meantime.

<label>My Label</label>
<div id="stencil-container"></div>

[gordon-brown]

I was trying to do it the hard way!