Treemap Chart

Component Status

React

Up to date

Usage


                                                        
                                                        
                                                            import { TreemapChart } from '@optimus-web/core';
                                                        
                                                        <TreemapChart
                                                          data={data}
                                                          valueFormatter={valueFormatter}
                                                          labelFormatter={labelFormatter}
                                                          animated={true}
                                                          title="Treemap Chart title"
                                                          minWidth={650}
                                                          minHeight={475}
                                                        />
                                                        
                                                            

Storybook

Open example in our Storybook

Storybook failed to load. Please connect to the VPN to access.

API

This component is a wrapper over Recharts Treemap chart

Name

Description

Type

Default

title?

Chart title, used for aria label, does not render in the UI

string

undefined

animated?

Apply animation to the chart on load

boolean

true

valueFormatter?

Callback for formatting the value inside the tooltip

ValueFormatter

undefined

labelFormatter?

Callback for formatting the label inside the tooltip

LabelFormatter

undefined

minWidth?

Applies min-width to the chart container

number

400

minHeight?

Applies min-height to the chart container

number

200

data

The dataset rendered by the chart

TreemapData

-

legend?

Enables the legend component on top of the chart

boolean

false