---
metadata:
  - name: generator
    content: Diplodoc Platform v5.39.1
alternate:
  - https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/layout.PieChart.md
  - https://yandex.com/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/layout.PieChart.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com/dev/jsapi-v2-1/doc/en/llms.txt

# layout.PieChart

Extends [layout.templateBased.Base](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/layout.templateBased.Base.md).

Pie chart layout. Available in the layout storage by the key 'default#pieChart'. The layout can be used as a tool for visualizing any data, or in combination with other visual API components such as placemarks, the clusterer, and the objects manager.

{% note info %}

Because diagrams are drawn using SVG technology, this layout doesn't work in browsers that don't support SVG, including IE8.

{% endnote %}

**See** [Placemark](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Placemark.md)[Clusterer](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Clusterer.md)[ObjectManager](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ObjectManager.md)[RemoteObjectManager](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/RemoteObjectManager.md)[LoadingObjectManager](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/LoadingObjectManager.md)

[Constructor](#constructor-summary) | [Fields](#properties-summary) | [Events](#events-summary) | [Methods](#methods-summary)

## Constructor {#constructor-summary}

```javascript
layout.PieChart(data)
```

**Parameters:**

#|
|| **Parameter** | **Default value** | **Description**  ||
|| [`data`](#param-data)[*](*star) | — | Type: Object

Layout data. ||
|| [`data.option.pieChartRadius`](#param-data.option.pieChartRadius) | 25 + 2 * Math.log(sum) | Type: Number\|Function

Radius of the diagram, in pixels. Set as a number, or as a function that accepts the layout's "properties" and "options" parameters and returns the diagram radius as a number. By default, the radius is defined as 25 + 2 * Math.log(sum) pixels, where sum is the total weight of the sectors. ||
|| [`data.options`](#param-data.options) | — | Type: [IOptionManager](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IOptionManager.md)

Options for rendering the layout. ||
|| [`data.options.pieChartCaptionMaxWidth`](#param-data.options.pieChartCaptionMaxWidth) | 200 | Type: Number

Maximum size of the label (iconCaption), in pixels. ||
|| [`data.options.pieChartCoreFillStyle`](#param-data.options.pieChartCoreFillStyle) | white | Type: String

Fill style for the core. Set as a string that encodes the fill color. ||
|| [`data.options.pieChartCoreRadius`](#param-data.options.pieChartCoreRadius) | pieChartRadius - 15 | Type: Number\|Function

The radius of the central part of the layout, where the content is displayed. Set in the same way as pieChartRadius — as a number or a function. By default, it takes a value that is 15 pixels less than pieChartRadius. ||
|| [`data.options.pieChartStrokeStyle`](#param-data.options.pieChartStrokeStyle) | white | Type: String

The style for lines between sectors and the outline of the diagram. Set as a string that encodes the line color. ||
|| [`data.options.pieChartStrokeWidth`](#param-data.options.pieChartStrokeWidth) | 2 | Type: Number

Width of the sector dividing lines and diagram outline, in pixels. Set as an integer. ||
|| [`data.properties`](#param-data.properties)[*](*star) | — | Type: [IDataManager](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IDataManager.md)\|Object

Properties of the geo object that is displayed using the layout. ||
|| [`data.properties.data`](#param-data.properties.data)[*](*star) | — | Type: Object[]\|Function

Statistical data to base the layout on. It should be an array of JSON objects with the "weight" and "color" fields or a function that returns this array. ||
|| [`data.properties.geoObjects`](#param-data.properties.geoObjects) | — | Type: [IGeoObject](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IGeoObject.md)[]

An array of geo objects in the cluster that needs to be displayed. Used if "properties.data" is missing. In this case, the layout traverses all geo objects, determines the value of the "iconColor" option for each object, and generates a diagram based on this data. ||
|| [`data.properties.iconCaption`](#param-data.properties.iconCaption) | "" | Type: String

Caption for the diagram. ||
|| [`data.properties.iconContent`](#param-data.properties.iconContent) | The sum of all the sectors | Type: String

The value that is written in the center of the diagram. If omitted, the sum of all the sectors is shown. ||
|#

\* Mandatory parameter/option.

**Example:**

```javascript
var geoObject = new ymaps.Placemark([55.25, 37.43], {
    // Data for generating a diagram.
    data: [
        { weight: 5, color: '#224080' },
        { weight: 3, color: '#408022' },
        { weight: 2, color: '#802240' }
    ]
}, {
    iconLayout: 'default#pieChart',
    // You can also use the "icon" prefix to redefine layout options.
    iconPieChartCoreRadius: 15
});

myMap.geoObjects.add(geoObject);
```

## Fields {#properties-summary}

#|
|| **Name** | **Type** | **Description** ||
|| [events](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IDomEventEmitter.md#events) | [IEventManager](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IEventManager.md) | Event manager.

Inherited from [IDomEventEmitter](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IDomEventEmitter.md#events). ||
|#

## Events {#events-summary}

#|
|| **Name** | **Description** ||
|| [click](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IDomEventEmitter.md#event-click) | Single left-click on the object. When using, keep in mind that mouse events are emulated when a touch screen is used. Instance of the [MapEvent](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/MapEvent.md) class. More information is available in [domEvent.manager](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/domEvent.manager.md).

Inherited from [IDomEventEmitter](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IDomEventEmitter.md#event-click). ||
|| [contextmenu](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IDomEventEmitter.md#event-contextmenu) | Calls the element's context menu. When using, keep in mind that mouse events are emulated when a touch screen is used. Instance of the [MapEvent](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/MapEvent.md) class. More information is available in [domEvent.manager](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/domEvent.manager.md).

Inherited from [IDomEventEmitter](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IDomEventEmitter.md#event-contextmenu). ||
|| [dblclick](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IDomEventEmitter.md#event-dblclick) | Double left-click on the object. When using, keep in mind that mouse events are emulated when a touch screen is used. Instance of the [MapEvent](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/MapEvent.md) class. More information is available in [domEvent.manager](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/domEvent.manager.md).

Inherited from [IDomEventEmitter](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IDomEventEmitter.md#event-dblclick). ||
|| [emptinesschange](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ILayout.md#event-emptinesschange) | Change to the empty layout indicator. Instance of the [Event](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Event.md) class.

Inherited from [ILayout](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ILayout.md#event-emptinesschange). ||
|| [mousedown](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IDomEventEmitter.md#event-mousedown) | Pressing the mouse button over the object. When using, keep in mind that mouse events are emulated when a touch screen is used. Instance of the [MapEvent](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/MapEvent.md) class. More information is available in [domEvent.manager](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/domEvent.manager.md).

Inherited from [IDomEventEmitter](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IDomEventEmitter.md#event-mousedown). ||
|| [mouseenter](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IDomEventEmitter.md#event-mouseenter) | Pointing the cursor at the object. When using, keep in mind that mouse events are emulated when a touch screen is used. Instance of the [MapEvent](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/MapEvent.md) class. More information is available in [domEvent.manager](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/domEvent.manager.md).

Inherited from [IDomEventEmitter](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IDomEventEmitter.md#event-mouseenter). ||
|| [mouseleave](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IDomEventEmitter.md#event-mouseleave) | Moving the cursor off of the object. When using, keep in mind that mouse events are emulated when a touch screen is used. Instance of the [MapEvent](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/MapEvent.md) class. More information is available in [domEvent.manager](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/domEvent.manager.md).

Inherited from [IDomEventEmitter](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IDomEventEmitter.md#event-mouseleave). ||
|| [mousemove](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IDomEventEmitter.md#event-mousemove) | Moving the cursor over the object. When using, keep in mind that mouse events are emulated when a touch screen is used. Instance of the [MapEvent](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/MapEvent.md) class. More information is available in [domEvent.manager](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/domEvent.manager.md).

Inherited from [IDomEventEmitter](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IDomEventEmitter.md#event-mousemove). ||
|| [mouseup](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IDomEventEmitter.md#event-mouseup) | Letting go of the mouse button over an object. When using, keep in mind that mouse events are emulated when a touch screen is used. Instance of the [MapEvent](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/MapEvent.md) class. More information is available in [domEvent.manager](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/domEvent.manager.md).

Inherited from [IDomEventEmitter](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IDomEventEmitter.md#event-mouseup). ||
|| [multitouchend](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IDomEventEmitter.md#event-multitouchend) | End of multitouch. This event is only available on devices that support multitouch. Returns an implementation of the IMultiTouchEvent interface.

Inherited from [IDomEventEmitter](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IDomEventEmitter.md#event-multitouchend). ||
|| [multitouchmove](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IDomEventEmitter.md#event-multitouchmove) | Repeating event during multitouch. This event is only available on devices that support multitouch. Returns an implementation of the IMultiTouchEvent interface with information about touches. Defines the touches property, which contains a list of touches. Every touch is described by an object that contains the following fields: 
- clientX - X coordinate of the touch relative to the viewable area of the browser.
- clientY - Y coordinate of the touch relative to the viewable area of the browser.
- pageX - X coordinate of the touch relative to the beginning of the document.
- pageY - Y coordinate of the touch relative to the beginning of the document.

Inherited from [IDomEventEmitter](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IDomEventEmitter.md#event-multitouchmove). ||
|| [multitouchstart](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IDomEventEmitter.md#event-multitouchstart) | Start of multitouch. This event is only available on devices that support multitouch. Returns an implementation of the IMultiTouchEvent interface with information about touches. Defines the touches property, which contains a list of touches. Every touch is described by an object that contains the following fields: 
- clientX - X coordinate of the touch relative to the viewable area of the browser.
- clientY - Y coordinate of the touch relative to the viewable area of the browser.
- pageX - X coordinate of the touch relative to the beginning of the document.
- pageY - Y coordinate of the touch relative to the beginning of the document.

Inherited from [IDomEventEmitter](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IDomEventEmitter.md#event-multitouchstart). ||
|| [parentelementchange](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ILayout.md#event-parentelementchange) | Change to the parent element. Instance of the [Event](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Event.md) class.

Inherited from [ILayout](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ILayout.md#event-parentelementchange). ||
|| [shapechange](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ILayout.md#event-shapechange) | Change to the shape of the area spanning the layout. Instance of the [Event](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Event.md) class.

Inherited from [ILayout](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ILayout.md#event-shapechange). ||
|| [wheel](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IDomEventEmitter.md#event-wheel) | Mouse wheel scrolling. When using, keep in mind that mouse events are emulated when a touch screen is used. Instance of the [MapEvent](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/MapEvent.md) class. More information is available in [domEvent.manager](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/domEvent.manager.md).

Inherited from [IDomEventEmitter](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IDomEventEmitter.md#event-wheel). ||
|#

## Methods {#methods-summary}

#|
|| **Name** | **Returns** | **Description** ||
|| [build](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/layout.templateBased.Base.md#build)() | | Builds a layout instance based on the template and adds it to the parent HTML element.

Inherited from [layout.templateBased.Base](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/layout.templateBased.Base.md#build). ||
|| [clear](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/layout.templateBased.Base.md#clear)() | | Removes layout content from DOM.

Inherited from [layout.templateBased.Base](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/layout.templateBased.Base.md#clear). ||
|| [destroy](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ILayout.md#destroy)() | | Destructor. Called when activity with the layout is finished.

Inherited from [ILayout](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ILayout.md#destroy). ||
|| [getData](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ILayout.md#getData)() | Object | Returns layout data object.

Inherited from [ILayout](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ILayout.md#getData). ||
|| [getParentElement](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ILayout.md#getParentElement)() | HTMLElement | Returns parent HTML element.

Inherited from [ILayout](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ILayout.md#getParentElement). ||
|| [getShape](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/layout.templateBased.Base.md#getShape)() | [IShape](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IShape.md)\|null | Returns a shape that defines the area spanning the layout, or null if it is not possible to plot this shape. By default, it tries to construct a shape via the "shape" option - this.getData().options.get('shape'). In the option, it can be set as an instance of a class implementing the IShape interface, or as a JSON description of the shape's pixel geometry. Coordinates of the shape's geometry should be calculated from the anchor point of the parent layout element.

Inherited from [layout.templateBased.Base](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/layout.templateBased.Base.md#getShape). ||
|| [isEmpty](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ILayout.md#isEmpty)() | Boolean | Returns true if the layout is empty, i.e. it does not have any content. This indicator is used for hiding empty objects such as hints, balloons, and others.

Inherited from [ILayout](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ILayout.md#isEmpty). ||
|| [onSublayoutSizeChange](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/layout.templateBased.Base.md#onSublayoutSizeChange)([sublayoutInfo](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/layout.templateBased.Base.md#onSublayoutSizeChange-param-sublayoutInfo), [nodeSizeByContent](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/layout.templateBased.Base.md#onSublayoutSizeChange-param-nodeSizeByContent)) | | Automatically called when resizing a nested layout, added with the `observeSize` option. Used to override specific classes of layouts to respond to the resizing of the content.

Inherited from [layout.templateBased.Base](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/layout.templateBased.Base.md#onSublayoutSizeChange). ||
|| [rebuild](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/layout.templateBased.Base.md#rebuild)() | | Re-sets the layout.

Inherited from [layout.templateBased.Base](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/layout.templateBased.Base.md#rebuild). ||
|| [setData](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ILayout.md#setData)([data](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ILayout.md#setData-param-data)) | | Sets layout data.

Inherited from [ILayout](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ILayout.md#setData). ||
|| [setParentElement](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ILayout.md#setParentElement)([parent](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ILayout.md#setParentElement-param-parent)) | | Adds the layout to the DOM tree.

Inherited from [ILayout](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ILayout.md#setParentElement).||
|#

[*star]: Mandatory parameter/option.