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

• childrenReactNodeoptional

  Examples:

  • Simple Treemap
  • Custom Content Treemap

• classNamestringoptional

• colorPanelArray<readonly 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<readonly TreemapDataType>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

• dataKeyFunction | number | stringoptional

  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

• fillstringoptional

  Examples:

  • Simple Treemap
  • Custom Content 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"

• nameKeyFunction | number | stringoptional

  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"

• nestIndexContentFunction | ReactNodeoptional

• strokestringoptional

  Examples:

  • Simple Treemap
  • Custom Content Treemap

• styleReact.CSSPropertiesoptional

  Examples:

  • Simple Treemap
  • Custom Content Treemap

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

• 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