Treemap Chart

React

Is new design vision part implemented using new tokens?

Up to date

Storybook

React guidance

Source

GitHub code

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


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

Name	Description	Type	Default
animated?	Apply animation to the chart on load	boolean	true
data	The dataset rendered by the chart	TreemapData	-
empty?	Sets empty state of chart with default message or you can define custom message	boolean \| { message: ReactNode }	undefined
error?	Sets empty state of chart with default message or you can define custom message	boolean \| { message: ReactNode }	undefined
labelFormatter?	Callback for formatting the label inside the tooltip	LabelFormatter	undefined
legend?	Enables the legend component on top of the chart	boolean	false
loading?	Show skeleton loader	boolean	undefined
minHeight?	Applies min-height to the chart container	number	200
minWidth?	Applies min-width to the chart container	number	400
title?	Chart title, used for aria label, does not render in the UI	string	undefined
valueFormatter?	Callback for formatting the value inside the tooltip	ValueFormatter	undefined

Resources

Example

API