How to make the Pie Charts clusterer work with arbitrary colors in Yandex.Maps?

Question

API

Strange things are happening with ymaps-pie-chart-clusterer. If you do everything according to the recommendation, it works:

ymaps.ready(function () {
  var myMap = new ymaps.Map('SeriaMap', {
    center: [55.75, 37.57],
    zoom: 10,
  });
  ymaps.modules.require(['PieChartClusterer'], function (PieChartClusterer) {
    var clusterer = new PieChartClusterer( );
    var points = [
      new ymaps.Placemark([55.7501, 37.5702],
        { balloonContent: 'метка типа А'},
        { preset: 'islands#blueIcon' } 
        ),
      new ymaps.Placemark([55.7502, 37.5702],
        { balloonContent: 'метка типа А'},
        { preset: 'islands#blueIcon' } 
        ),
      new ymaps.Placemark([55.7501, 37.5701],
        { balloonContent: 'метка типа B'},
        { preset: 'islands#redIcon' } 
        ),
      new ymaps.Placemark([55.7502, 37.5701],
        { balloonContent: 'метка типа А'},
        { preset: 'islands#blueIcon' } 
        )
    ];
    clusterer.add(points);
    myMap.geoObjects.add(clusterer);
   });
});

If you define your own colors for labels, it doesn't work:

ymaps.ready(function () {
  var myMap = new ymaps.Map('SeriaMap', {
    center: [55.75, 37.57],
    zoom: 10,
  });

  ymaps.modules.require(['PieChartClusterer'], function (PieChartClusterer) {
    var clusterer = new PieChartClusterer( );
    var points = [
      new ymaps.Placemark([55.7501, 37.5702],
        { balloonContent: 'метка типа А'},
        { preset: 'islands#circleIcon', iconColor: 'rgb(0,0,128)' } 
        ),
      new ymaps.Placemark([55.7502, 37.5702],
        { balloonContent: 'метка типа А'},
        { preset: 'islands#circleIcon', iconColor: 'rgb(0,0,128)' } 
        ),
      new ymaps.Placemark([55.7501, 37.5701],
        { balloonContent: 'метка типа B'},
        { preset: 'islands#circleIcon', iconColor: 'rgb(255,0,0)' } 
        ),
      new ymaps.Placemark([55.7502, 37.5701],
        { balloonContent: 'метка типа А'},
        { preset: 'islands#circleIcon', iconColor: 'rgb(0,0,128)' } 
        )
    ];
    clusterer.add(points);
    myMap.geoObjects.add(clusterer);
   });
});

More precisely, tags work, but clustering with shares does not work. Instead of a multi-colored paste - a white circle. Maybe I'm doing something wrong? The developer's blog says that it should work: ymapsapi.ya.ru/replies.xml?parent_id=2325&with_par...

Answer 1

As you correctly noted in the link on the Yandex forum, it does not work because the color is taken from the preset. You can make a pull request and fix the code. There you need to add something like this:
(file pieChartClusterer.js)

createCluster: function (center, geoObjects) {
 // Создаем метку-кластер с помощью стандартной реализации метода.
 var clusterPlacemark = PieChartClusterer.superclass.createCluster.call(this, center,   geoObjects);
  var styleGroups = geoObjects.reduce(function (groups, geoObject) {
  var style = geoObject.options.get('iconColor', null);
  // eсли iconColor параметр не указан - берем значение из preset'а
  if (style === null) {
    style = getIconStyle(geoObject.options.get('preset', 'islands#blueIcon'));
  }
  ...
            
};

And pass the value in the function (component/Canvas.js file)

Canvas.prototype._getStyleColor = function (style) {
        return (iconColors[style] === undefined)? style: iconColors[style];
    };

Answer 2

Maybe it is necessary to set in HEX format, and not rgb() ?
In the examples, it is HEX.

Answer 3

Also faced the same problem. Cluster colors are taken from label preset names included in the cluster. Because I want to use my own colors, so I proceeded as follows.
I set the labels in the properties of the color I need and the invented preset. Here comes the property search.

var gq = ymaps.geoQuery(placemarks);
gq.search('properties.ts == "inprogress"').setOptions({
        iconColor: '#0c99c6', 
        preset: 'islands#inprogressIcon'
});
gq.search('properties.ts == "closed"').setOptions({ 
        iconColor: '#7eb222',
        preset: 'islands#closedIcon' 
});

And in the pie-chart-clusterer.min.js file, I supplement the array with my new "colors":

...
var e={
blue:"#1E98FF",red:"#ED4543",darkOrange:"#E6761B"
,night:"#0E4779",darkBlue:"#177BC9",pink:"#F371D1",
gray:"#B3B3B3",brown:"#793D0E",darkGreen:"#1BAD03",
violet:"#B51EFF",black:"#595959",yellow:"#FFD21E",
green:"#56DB40",orange:"#FF931E",lightBlue:"#82CDFF",
olive:"#97A100",inprogress:"#0c99c6",closed:"#7eb222"
...

It is clear that the solution is not universal, but working.