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. 

<!DOCTYPE html>
<html>
    <head>
        <title>
            Examples. Layout in the form of a pie chart (PieChart).
        </title>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=UTF-8"
        />
        <!--
        Set your own API-key. Testing key is not valid for other web-sites and services.
        Get your API-key on the Developer Dashboard: https://developer.tech.yandex.ru/keys/
    -->
        <script
            src="https://api-maps.yandex.ru/2.1/?lang=en_RU&amp;apikey=<your API-key>"
            type="text/javascript"
        ></script>
        <script
            src="clusterer_pie_chart.js"
            type="text/javascript"
        ></script>
        <style>
            html,
            body,
            #map {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>

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)
        ];
    }
});