Search code examples
javascripthighcharts

Highcharts tilemap - prevent item hiding

I'm creating a JS project using Highcharts lib (tilemap component). It now looks like this: enter image description here

colorAxis: {  // colors of my categories
        dataClasses: [{
            from: 1,
            to: 1,
            color: '#828ee3',
            name: 'Субъекты организации и ее представительств'
        }, {
            from: 2,
            to: 2,
            color: '#febf10',
            name: 'Прибыли в субъект из организации'
        }, {
            from: 3,
            to: 3,
            color: '#6fcf97',
            name: 'Прибыли в организацию из субъекта'
        }]
    },

Unlike other map chart, when i click on a legend item, some items disappear from map: enter image description here

I was able do disable legend click, but is it possible to chage the tile color instead of fully hiding it?
Code source here

Solution

  • You can overwrite the behaviour of the setVisible method for tilemap points by adding the below plugin.

    (function(H) {
  H.wrap(
    H.seriesTypes.tilemap.prototype.pointClass.prototype,
    'setVisible',
    function(proceed, vis) {
      const point = this;

      if (!point.orginalColor) {
        point.orginalColor = point.color;
      }

      if (vis) {
        point.color = point.orginalColor;
      } else {
        point.color = 'red';
      }
    });
}(Highcharts));

    Live demo: https://jsfiddle.net/BlackLabel/yx7c8049/

    Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts