Search code examples
javascripthighcharts

Highchart tilemap: tile color

I'm making a JS project using tilemap chart from Highcharts lib. It now looks like this: enter image description here

As you can see, I have three categories, but sometimes one tile can be fit for 2 categories at the same time. I have created my categories like this:

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: 'Прибыли в организацию из субъекта'
        }]
    },

And when I need my tile to be fit for both categories, I simply set it's color like that:

{
    'hc-a2': 'Калу',
    name: 'Калужская',
    region: 'South',
    x: 4,
    y:6,
    value: 0,
    color: {  // set two colors via gradient
        linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
        stops: [
            [0, '#febf10'],
            [0.5, '#febf10'],
            [0.55, "#fff"],
            [0.6, '#6fcf97'],
            [1, '#6fcf97']
        ]
    }
},

The problem is, when i turn off one of the categories (for example, green one), tiles with two colors still have green color (because, even though they look like they have 2 categories, in actuality they have none): enter image description here

Is there a way to prevent a category from turning it off? Or is there another way to fix my issue?
P.S. full code example: https://jsfiddle.net/gybtc7jr/118/

Solution

  • Is there a way to prevent a category from turning it off?

    Yes, you can use plotOptions.series.events.legendItemClick callback function to prevent default event.

    Demo: https://jsfiddle.net/BlackLabel/hLzvk2ug/
    API: https://api.highcharts.com/highcharts/plotOptions.series.events.legendItemClick