CODEWITHSUNDEEP
javascriptreactjshighchartstreemap
Afsanefda
Afsanefda

Reputation: 3339

How to customize highchart treemap datalabels?

This is my treemap. I have 3 levels and I want to customize the labels like the provided picture.

Edit treemap-heatmap

to be more specific I want:

  1. In the first level I want to have the first level labels out of the main box on the top and the second level should hide here.

  2. After drill down in the second level I want to have the labels again out of the main box.

  3. In all levels, I want to see the last level details in labels as shown in the sample image.

  4. And is there a way to have 3 levels but just drill down into 2 levels?

  5. And do you know why the colors change after drill down? the colors are not the same in the first level and third level!

Thanks a lot for your consideration.

This.

Upvotes: 1

Views: 1414

Answers (1)

Afsanefda
Afsanefda

Reputation: 3339

As mentioned in comments by @WojciechChmiel the solution for the color difference problem is to set the parent color as transparent!

for having labels outside of the section box I used data label format function. In react the renderToString helped me to pass the react component as a title for levels.

I also could recognize the level of each label by:

  const { level } = data.point.node;

with this, I could manage which desirable label to display!

-Running demo provided below!

Edit treemap-heatmap-solution

Upvotes: 2

Related Questions