how to draw multiple data highcharts treemap with highcharts-react-official?

Question

how to draw treemap with highcharts-react-official ? I'm trying to draw my data in the container which is wrapping my treemap, but at some reason the map doesn't show well.

this is how my treemap looks like. If the chart gets more data from server, then treemap gets densed so that I can't see the treemap data at all.

To make sure here is the code about my ChartContainer.

const Treemap = () => {
  HighchartsTreemap(Highcharts);
  const { countryData } = useCountryData();

  const options = {
    title: {
      text: "",
    },
    series: [
      {
        type: "treemap",
        layoutAlgorithm: "squarified",
        layoutStartingDirection: "horizontal",
        alternateStartingDirection: true,
        data: [
          { name: "Belgium", value: "1" },
          { name: "Bulgaria", value: "2" },
          { name: "China", value: "8" },

        ],
      },
    ],
  };

  return (
    <Container>
      <ChartContainer>
        <HighchartsReact highcharts={Highcharts} options={options} />
      </ChartContainer>
    </Container>
  );
};

Is there anything that I need to add for the options?

Answer 1

There is no difference in chart options with using highcharts-react-official. The only thing that you need to improve is the type of value in data. The value needs to be a number, not a string.

  series: [{
    ...,
    data: [{
        name: "Belgium",
        value: 1
      },
      {
        name: "Bulgaria",
        value: 2
      },
      {
        name: "China",
        value: 8
      }
    ]
  }]

---

Live demo: https://jsfiddle.net/BlackLabel/9dr0xL12/

Docs: https://www.highcharts.com/docs/chart-and-series-types/treemap