Tree Map about handling Negative numbers

[austinpoon615]

I used Tree Map to show the distribution of the data. The value of the parent node should be the total of its children nodes. If the values of the children nodes are positive values, all is fine. Sadly, the tree map chart ignores all the negative values of children nodes to calculate the sum of parent node. Does anyone have a solution to resolve this problems ?\

A node has three nodes including A1,A2 and A3. The sum of three nodes should be 10 (10+10-10), but the chart shows 20 as the result.

Screenshot 2018-10-23 at 18.04.47.png (47.1 KiB) Viewed 2386 times

Screenshot 2018-10-23 at 18.04.39.png (19.14 KiB) Viewed 2386 times

[rafalS]

Hi, austinpoon615!

This is a fundamental problem of this kind of area chart - it can't display negatives values. But if you really want to stay with it, you can use this workaround to display proper sum in tooltip:

Code: Select all

tooltip: {
        	pointFormatter() {
          	let point = this,
            	sum = 0;
            if (point.node.children.length > 0) {
            	point.node.children.forEach((child) => {
                sum += child.val
              })
            	return sum
            } else {
            	return point.value
            }
          }
        },

jsFiddle: https://jsfiddle.net/BlackLabel/0c7aqxyh/

API Reference: https://api.highcharts.com/highcharts/s ... tFormatter

Best regards!

[austinpoon615]

Hi rafalS,

Thank you so much for the speedy reply. Your solution is good to show the true values on the tooltip, but still cannot show the chart i want. I need to show the values on the gird by using https://api.highcharts.com/highcharts/s ... ataLabels..
do you have any solution to override the calculation method for the points which can store the true values ?

The values are calculated by using treemap.levels.dataLables.formatter. The chart has multiples levels to show. if I want to get the values I have to do the recursion calls, which is what i want to avoid.

Screenshot 2018-10-24 at 12.58.32.png (21.61 KiB) Viewed 2371 times

[rafalS]

austinpoon615,

Could you explain more clearly what exactly you want to achieve? Or prepare an online demo I can work on?
Do you want to display true values in dataLabels? Or you want to display negative points on the chart? The more info I get, the better I will able to help you

[austinpoon615]

rafalS,

https://jsfiddle.net/ehdq0opx/1/
As you see the example, I need to calculate sum and percentage of each point and place the values on the grid. I will get the sum of the same level's points first via calling point.node.val, then get the percentage of the each point. Unfortunately, point.node.val is the sum ignoring negative values, which means that the percentage of each point and the value of first level (Building) are wrong.

[rafalS]

austinpoon615,

You are right, point.node.val will ignore negative values, but why do you have to use this specific property? You can calculate your values on your own e.g like this:

Code: Select all

  let newSum = 0;
          this.series.data.forEach((point) => {
          	if (point.options.value) {
            	newSum += point.options.value
            }
          })
          console.log(newSum)

jsFiddle: https://jsfiddle.net/BlackLabel/51qovznw/