09 Data Binding
Step 10/12 — 10 Layout
01 Creating the View 02 Creating Graph Elements 03 Managing Viewport 04 Setting Styles 05 Label Placement 06 Basic Interaction 07 Undo Clipboard Support 08 Grouping 09 Data Binding 10 Layout 11 Layout Data 12 Analysis Algorithms
11 Layout Data

# Automatic Graph Layout

## How to arrange the graph automatically

This step shows how to use the layout algorithms in yFiles for HTML to automatically place the graph elements.

Automatic layout is one of the main features of the yFiles products. The layout library provides a large set of ready-to-use, highly customizable algorithms for most scenarios. The purpose of this sample is to demonstrate how to run an arbitrary layout algorithm. For an overview of the available layout styles, please see the Layout Styles Demo.

### Calculating a layout

Click the button below to calculate and apply an automatic layout. In this example, the layout is not animated, but applied instantly.

    const layout = new HierarchicLayout()
    graph.applyLayout(layout)

    // Fit the graph bounds since they changed for the new layout
    graphComponent.fitGraphBounds()

### Running a layout animation

An automatic layout can also be applied with an animation. In this sample, we use morphLayout to perform the layout, animate it, manage undo and adjust the content rectangle in one call. morphLayout runs asynchronously and returns immediately yielding a Promise that we can await or use to catch errors.

    // Here, we reference and thus load the LayoutExecutor class from the 'view-layout-bridge' module
    // explicitly to prevent tree-shaking tools from removing the dependency.
    // This is needed for 'morphLayout' to work.
    Class.ensure(LayoutExecutor) // doing this somewhere in your code should suffice

    await graphComponent.morphLayout({
      layout: new OrganicLayout({ considerNodeSizes: true }),
      morphDuration: '1s',
      easedAnimation: true
    })

Note | morphLayout is a convenience method that comes with a lot of parameters that can be used to adjust various aspects of the layout animation. For more customized scenarios, use class LayoutExecutor.

11 Layout Data