CODEWITHSUNDEEP
highcharts
Ali
Ali

Reputation: 43

Highcharts large treemap how can I dynamically change allowDrillToNode flag?

I do this for show/hide datalabels, that I do with formatter. Now I want to change the allowDrillToNode flag manually when I click on a button and I don't want the chart to render again.

self.Model.marketMapChartInfo = {
        series: [{
            type: "treemap",
            layoutAlgorithm: 'squarified',
            allowDrillToNode: true,
            layoutStartingDirection: "horizontal",
            dataLabels: {
                enabled: true,
                useHTML: true,
                style: {
                    fontFamily: 'isw',
                    fontSize: '13px',
                },
                formatter: null
            },
            levelIsConstant: false,
            levels: [{
                level: 1,
                dataLabels: {
                    enabled: true,
                    useHTML: true,
                    style: {
                        fontFamily: 'isw',
                        fontSize: '13px',
                    },
                    formatter: null
                },
                borderWidth: 1
            }],
            data: null,
            events: {
                click: function (event) {
                    console.log("Node clicked!");
                }
            }
        }]
    }

    self.Model.MarketMapLargeTreeMap = Highcharts.chart('market-map-large-tree-map', self.Model.marketMapChartInfo);

These are the codes that are executed when you click a button. With these codes I handle the display of whether or not to label, but I couldn't use for allowDrillToNode flag.

self.Model.marketMapChartInfo.series[0].dataLabels.formatter = function () {
            if (self.Model.allocationParam != "sector") {
                return '<div class="text-center" dir="auto"><span>' + this.point.name + '</span>' +
                    '<br>' +
                    '<span>' + Highcharts.numberFormat(this.point.value, 0) + '</span></div>';
            } else {
                return null;
            }
        };
        self.Model.marketMapChartInfo.series[0].levels[0].dataLabels.formatter = function () {
            if (self.Model.allocationParam == "sector") {
                return '<div class="text-center" dir="auto"><span>' + this.point.name + '</span>' +
                    '<br>' +
                    '<span>' + Highcharts.numberFormat(this.point.value, 0) + '</span></div>';
            } else {
                return null;
            }
        };
        $timeout(function () {
            self.Model.MarketMapLargeTreeMap.series[0].isDirty = true;
            self.Model.MarketMapLargeTreeMap.redraw();
        }, 1);

jsFiddle

Upvotes: 1

Views: 485

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

From the source code: https://github.com/highcharts/highcharts/blob/master/ts/modules/treemap.src.ts#L1002 it seems that you need to update allowTraversingTree property:

chart.series[0].update({
  allowTraversingTree: false
});

Live demo: https://jsfiddle.net/BlackLabel/5dw2kcmt/

API Reference: https://api.highcharts.com/class-reference/Highcharts.Series#update

Upvotes: 2

Related Questions