To use the zoomable circle packs, import these on top:

import { CirclePacks } from 'chartformers';
import 'chartformers/dist/chartformers.css';

Minimum call:

The chart must be called in a container with width and height set. It will then fill the available space of this container.

<div className="w-full h-60 md:h-96">
 <CirclePacks data={[]} />
</div>

the data is an array of objects with a mandatory 'name' string property, an optional number 'value' property, and an optional 'children' property, which is an array of the same data shape. If the 'children' property is not presents then the 'value' property is mandatory and must be given a number value which is greater than 0, so the system will be able to calculate and render the chart properly.

Sample data :

const sample1 = [
    { name: "USA", value: 1250000}
]

const sample2 = [
    {
        name: "USA", 
        children: [
            { name: "New York Main Branch", value: 800000 },
            { name: "Houston Branch", value: 450000 }
        ]
    }
]

const sample3 = [
    {
        name: "USA", 
        children: [
            { name: "New York Main Branch",value: 800000 },
            { name: "Houston Branch", value: 450000 }
        ]
    },
    {
        name: "United Kingdom",
        children: [
            { name: "London Main Branch", value: 900000 },
            { name: "Liverpool Branch", value: 675000 },
            { name: "Bristol Branch", value: 527000 }
        ]
    }
]

#Property Table