CODEWITHSUNDEEP
highcharts
user4772933
user4772933

Reputation: 321

Highchart Heatmap remove empty rows on legend toggle

I have a category Heatmap with both colorAxis and seriesLegend using solution here Show Series and colorAxis both in Legend and highchart-category-grouped plugin. Fiddle here https://jsfiddle.net/k16sdhrz/

When i toggle the series, I am left with empty rows which belonged to the series. enter image description here

Is there a highchart setting that would remove these categories from axis and hence remove the empty rows. So space can be freed up?

 chart: {
    type: 'heatmap',
},

yAxis: {
    categories: [{
            name: 'Cat 1',
            categories: ['Item 1_1', 'Item 1_2']
        },
        {
            name: 'Cat 2',
            categories: ['Item 2_1', 'item 2_2']
        }
    ]
},

Thanks for your help.

Upvotes: 1

Views: 433

Answers (1)

ppotaczek
ppotaczek

Reputation: 39139

Since Highcharts v7.2 it is enough to set showInLegend: true for series to show it with colorAxis.

As to your question - you can dynamically add and remove breaks to hide empty rows:

series: [{
    ...,
    events: {
        legendItemClick: function() {
            if (this.visible) {
                this.yAxis.update({
                    breaks: [{
                        from: 1.5,
                        to: 2.5,
                        breakSize: 0
                    }]
                }, false);
            } else {
                this.yAxis.update({
                    breaks: []
                }, false);
            }
        }
    }
}, ...]

Live demo: https://jsfiddle.net/BlackLabel/0d9a4whz/

API Reference:

https://api.highcharts.com/highcharts/yAxis.breaks

https://api.highcharts.com/highcharts/series.heatmap.events.legendItemClick

Upvotes: 1

Related Questions