---
metadata:
- name: generator
content: Diplodoc Platform v5.39.1
alternate:
- https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/clusterer_pie_chart.md
- https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/clusterer_pie_chart.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/dev/jsapi-v2-1/doc/en/llms.txt
# Layout in the form of a pie chart
Open in CodeSandbox
Pie chart layout layout.PieChart. 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.
The layout can be based on statistical data that should be an array of JSON objects with the "weight" and "color" fields
or a function that returns this array (see the "Placemark" example).
If "properties.data" is missing, the layout traverses all geo objects, determines the value of the "iconColor" option for each object, and
generates a diagram based on this data.
{% list tabs %}
- index.html
```html
Examples. Layout in the form of a pie chart (PieChart).
```
- clusterer_pie_chart.js
```js
ymaps.ready(function () {
var myMap = new ymaps.Map(
"map",
{
center: [55.751574, 37.573856],
zoom: 9,
},
{
searchControlProvider: "yandex#search",
}
),
// Values for icon colors.
placemarkColors = [
"#DB425A",
"#4C4DA2",
"#00DEAD",
"#D73AD2",
"#F8CC4D",
"#F88D00",
"#AC646C",
"#548FB7",
],
clusterer = new ymaps.Clusterer({
// The layout of the pieChart cluster placemark.
clusterIconLayout: "default#pieChart",
// Radius of the diagram, in pixels.
clusterIconPieChartRadius: 25,
// The radius of the central part of the layout.
clusterIconPieChartCoreRadius: 10,
// Width of the sector dividing lines and diagram outline.
clusterIconPieChartStrokeWidth: 3,
}),
points = [
[55.831903, 37.411961],
[55.763338, 37.565466],
[55.763338, 37.565466],
[55.744522, 37.616378],
[55.780898, 37.642889],
[55.793559, 37.435983],
[55.800584, 37.675638],
[55.716733, 37.589988],
[55.775724, 37.56084],
[55.822144, 37.433781],
[55.87417, 37.669838],
[55.71677, 37.482338],
[55.78085, 37.75021],
[55.810906, 37.654142],
[55.865386, 37.713329],
[55.847121, 37.525797],
[55.778655, 37.710743],
[55.623415, 37.717934],
[55.863193, 37.737],
[55.86677, 37.760113],
[55.698261, 37.730838],
[55.6338, 37.564769],
[55.639996, 37.5394],
[55.69023, 37.405853],
[55.77597, 37.5129],
[55.775777, 37.44218],
[55.811814, 37.440448],
[55.751841, 37.404853],
[55.627303, 37.728976],
[55.816515, 37.597163],
[55.664352, 37.689397],
[55.679195, 37.600961],
[55.673873, 37.658425],
[55.681006, 37.605126],
[55.876327, 37.431744],
[55.843363, 37.778445],
[55.875445, 37.549348],
[55.662903, 37.702087],
[55.746099, 37.434113],
[55.83866, 37.712326],
[55.774838, 37.415725],
[55.871539, 37.630223],
[55.657037, 37.571271],
[55.691046, 37.711026],
[55.803972, 37.65961],
[55.616448, 37.452759],
[55.781329, 37.442781],
[55.844708, 37.74887],
[55.723123, 37.406067],
[55.858585, 37.48498],
],
geoObjects = [];
for (var i = 0, len = points.length; i < len; i++) {
geoObjects[i] = new ymaps.Placemark(
points[i],
{},
{
iconColor: getRandomColor(),
}
);
}
clusterer.add(geoObjects);
myMap.geoObjects.add(clusterer);
myMap.setBounds(clusterer.getBounds(), {
checkZoomRange: true,
});
function getRandomColor() {
return placemarkColors[
Math.round(Math.random() * placemarkColors.length)
];
}
});
```
{% endlist %}