# Distribute Shapes

## Content

The space between two or more shapes can be distributed equally in horizontal or vertical directions by using `moveShapesByHDistribute` or `moveShapesByVDistribute` commands respectively. These commands calculate the horizontal or vertical distances between the ending of one shape and the start of the other, then calculate the average distance to distribute shapes.

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/shape-distribute-horizontal.png)

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/shape-distribute-vertical.png)

Grouped shapes are considered as single shapes by distribution commands.

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/shape-distribute-group.png)

Connector shapes can also be distributed if not connected to any other shape.

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/shape-distribute-connector.png)

The following code sample distributes three rectangle shapes horizontally and vertically.

```javascript
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var sheet = spread.getActiveSheet();
var rect1 = sheet.shapes.add('rect1', GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 100, 50, 230, 100);
var shapeStyle = rect1.style();
shapeStyle.fill.color = '#40E0D0';
var rect2 = sheet.shapes.add('rect2', GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 200, 200, 150, 100);
var rect3 = sheet.shapes.add('rect3', GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 500, 350, 200, 100);
            
var commandManager = spread.commandManager();
// Horizontal Distribution
commandManager.execute({
    cmd: 'moveShapesByHDistribute',
    sheetName: sheet.name(),
    shapeNames: ['rect1', 'rect2', 'rect3'],
});

// Vertical Distribution
commandManager.execute({
    cmd: 'moveShapesByVDistribute',
    sheetName: sheet.name(),
    shapeNames: ['rect1', 'rect2', 'rect3'],
});
```