Treemap Chart Card

 

React

Is new design vision part implemented using new tokens?

Up to date

Resources

Example

Storybook failed to load. Please connect to the VPN to access.
import { TreemapChartCard } from '@optimus-web/core';

<TreemapChartCard
  title='Treemap chart card'
  subtitle='Last 7 days'
  menuActions={actions}
  chart={{
      data={data}
      valueFormatter={valueFormatter}
      labelFormatter={labelFormatter}
      animated={true}
      title="Treemap Chart title"
      minWidth={650}
      minHeight={475}
  }}
/>

API

Name

Description

Type

Default

chart?

Chart configuration object needed for render the card chart.

TreemapChartCardProps

undefined

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

id

Card id, used internally for AA

string

-

menuActions?

Collection of actions rendered inside the top right dropdown menu

ChartCardActions

undefined

loading?

Show skeleton loader

boolean

undefined

subtitle?

Card subtitle rendered in the card header. Ellipsis is set to render two lines. A width has to be defined in the parent component in order the text-overflow works properly.

string

undefined

title

Card title rendered in the card header. Ellipsis is set to render one line. A width has to be defined in the parent component in order the text-overflow works properly.

string

-