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"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:

  • Simple Treemap
  • Nested Treemap

• childrenReactNodeoptional

  Examples:

  • Simple Treemap
  • Custom Content Treemap
  • Nested Treemap

• 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:

  • Custom Content Treemap

• 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:

  • Simple Treemap
  • Custom Content Treemap
  • Nested Treemap

• 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:

  • Simple Treemap
  • Custom Content Treemap
  • Nested Treemap

• fillstringoptional

  Examples:

  • 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 enabled in browser.

  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:

  • Nested Treemap

• nestIndexContentFunction | ReactNodeoptional

• strokestringoptional

  Examples:

  • Simple Treemap
  • Custom Content Treemap
  • Nested Treemap

• styleReact.CSSPropertiesoptional

  Examples:

  • Simple Treemap
  • Custom Content Treemap
  • Nested Treemap

• 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:

  • 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