Skip to main content



Filters items in the diagram


rule?: function,
config?: object
): void;

// or

rule?: object,
config?: object
): void;


  • rule - (optional) the filtering criteria. The parameter can be:
    • a function
    • or an object which can have following attributes:
      • by: string | number - (optional) the key of the item attribute
      • match: string | number | boolean - (optional) a pattern to match
      • compare: function - (optional) a function for extended filtering. The function returns either true or false and takes three parameters:
        • value: any - the value to compare
        • match: any - a pattern to match
        • item: any - a data item the values of which should be compared (e.g. a shape)
    • config - (optional) an object which defines the parameters of filtering. The object may contain two properties:
      • add: boolean - (optional) defines whether each next filtering will be applied to the already filtered data (true), or to the initial data (false, default)
      • smartFilter: boolean - (optional) defines whether a filtering rule will be applied after adding and editing items of the collection


const diagram = new dhx.Diagram("diagram_container", {
type: "default"

// filtering by the rule specified in the function (shape) {
return > 3;

// filtering by the key of the shape attribute{ by: "text", match: "Read N" });

To revert the diagram to the initial state, call the filter() method without parameters.;

Related articles: Filtering items

Related sample: Diagram. Data. Filtering shapes