Treemap

Props

• animationBeginnumberoptional

  Specifies when the animation should begin, the unit of this option is ms.

  DEFAULT: 0

• animationDurationnumberoptional

  Specifies the duration of animation, the unit of this option is ms.

  DEFAULT: 1500

• animationEasing"ease" | "ease-in" | "ease-in-out" | "ease-out" | "linear" | "spring" | BezierEasingFunction | SpringEasingFunction | `cubic-bezier(${number},${number},${number},${number})`optional

  The type of easing function.

  DEFAULT: "linear"

• animationIdnumberoptional@deprecated

  Deprecated: unused prop, doesn't do anything, use `key` instead

• aspectRationumberoptional

  The treemap will try to keep every single rectangle's aspect ratio near the aspectRatio given.

  DEFAULT: 1.618033988749895

  Examples:

  • Bundle Size Treemap
  • Simple Treemap
  • Nested Treemap
  • Treemap with Padding and Gaps

• childrenReactNodeoptional

  Examples:

  • Bundle Size Treemap
  • Simple Treemap
  • Custom Content Treemap
  • Nested Treemap
  • Treemap with Padding and Gaps

• classNamestringoptional

• colorPanelArray<string>optional

• content(union of 8 variants)optional

  If set to a React element, the option is the customized React element of rendering the content. If set to a function, the function will be called to render the content.

  Examples:

  • Bundle Size Treemap
  • Custom Content Treemap
  • Treemap with Padding and Gaps

• dataArray<DataPointType>optional

  The source data. Each element should be an object. The properties of each object represent the values of different data dimensions.

  Use the dataKey prop to specify which properties to use.

  If the children property is present on an element, it will be treated as a nested treemap.

  Examples:

  • Bundle Size Treemap
  • Simple Treemap
  • Custom Content Treemap
  • Nested Treemap
  • Treemap with Padding and Gaps

• dataKeyTypedDataKey<DataPointType, DataValueType>optional

  Decides how to extract the value of this Treemap from the data:

  • string: the name of the field in the data object;
  • number: the index of the field in the data;
  • function: a function that receives the data object and returns the value of this Treemap.

  DEFAULT: "value"

  Examples:

  • Bundle Size Treemap
  • Simple Treemap
  • Custom Content Treemap
  • Nested Treemap
  • Treemap with Padding and Gaps

• fillstringoptional

  Examples:

  • Bundle Size Treemap
  • Simple Treemap
  • Custom Content Treemap
  • Nested Treemap

• height`${number}%` | numberoptional

  The height of chart container. Can be a number or a percent string like "100%".

• idstringoptional

• isAnimationActive"auto" | false | trueoptional

  If set false, animation of treemap will be disabled. If set "auto", the animation will be disabled in SSR and will respect the user's prefers-reduced-motion system preference for accessibility.

  DEFAULT: "auto"

• isUpdateAnimationActive"auto" | false | trueoptional

  DEFAULT: "auto"

• nameKeyTypedDataKey<DataPointType, DataValueType>optional

  Name represents each sector in the tooltip. This allows you to extract the name from the data:

  • string: the name of the field in the data object;
  • number: the index of the field in the data;
  • function: a function that receives the data object and returns the name.

  DEFAULT: "name"

  Examples:

  • Bundle Size Treemap
  • Nested Treemap
  • Treemap with Padding and Gaps

• nestIndexContentFunction | ReactNodeoptional

• nodeGapnumberoptional

  The gap between the nodes.

  Adds spacing between sibling nodes at the same depth level. This does not inset children from their parent boundary.

  DEFAULT: 0

  Examples:

  • Treemap with Padding and Gaps

• nodeInsetnumberoptional

  The inset between a parent node and its child nodes.

  Insets a parent node's available area before laying out its children. This creates space between a parent boundary and its child nodes.

  DEFAULT: 0

  Examples:

  • Treemap with Padding and Gaps

• strokestringoptional

  Examples:

  • Bundle Size Treemap
  • Simple Treemap
  • Custom Content Treemap
  • Nested Treemap

• styleReact.CSSPropertiesoptional

  Examples:

  • Bundle Size Treemap
  • Simple Treemap
  • Custom Content Treemap
  • Nested Treemap
  • Treemap with Padding and Gaps

• throttleDelay"raf" | numberoptional

  Decides the time interval to throttle events. Only events defined in throttledEvents prop are throttled. All other events are executed immediately/synchronously.

  Options:

  • number: the time interval in milliseconds
  • 'raf': use requestAnimationFrame to schedule updates.

  DEFAULT: "raf"

• throttledEvents"all" | Array<keyof GlobalEventHandlersEventMap>optional

  Defines which events should be throttled. Events not in this list will not be throttled.

  Use the special value 'all' to throttle all events. Empty array means no events are throttled.

  Use the prop throttleDelay to define the throttling interval.

  If an event is on this list, then you lose the opportunity to access the event synchronously. Which means that if you want to call e.preventDefault() or e.stopPropagation() inside the event handler, then that event handler must not be in this list.

  DEFAULT: ["mousemove","touchmove","pointermove","scroll","wheel"]

• type"flat" | "nest"optional

  The type of treemap to render.

  • 'flat': Renders the entire treemap at once, with all leaf nodes visible.
  • 'nest': Renders an interactive, nested treemap. Clicking on a parent node will "zoom in" to show its children, and a breadcrumb navigation will be displayed to allow navigating back up the hierarchy.

  DEFAULT: "flat"

  Examples:

  • Bundle Size Treemap
  • Nested Treemap

• width`${number}%` | numberoptional

  The width of chart container. Can be a number or a percent string like "100%".

• onAnimationEndFunctionoptional

  The customized event handler of animation end

• onAnimationStartFunctionoptional

  The customized event handler of animation start

• onClickFunctionoptional

• onMouseEnterFunctionoptional

• onMouseLeaveFunctionoptional