Search code examples
javascriptreactjshighchartstreemap

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.

Solution

  • 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