Pie Chart

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 { PieChart, PieChartScoreLabel, PieChartScoreValue } from '@optimus-web/core';
                                                        
                                                        <PieChart
                                                          data={sixData}
                                                          title="Pie Chart title"
                                                          description="Pie Chart description"
                                                          minWidth={160}
                                                          id="pie-chart"
                                                          animated={true}
                                                        >
                                                            <PieChartScoreValue suffix="%">{value}</PieChartScoreValue>
                                                            <PieChartScoreLabel>Label</PieChartScoreLabel>
                                                        </PieChart>
                                                        
                                                            

API

This component is a wrapper over Recharts PieChart, some properties refer directly to those used in Recharts.

PieChart

Name

Description

Type

Default

animated?

Apply animation to the chart on load

boolean

true

children?

Accepts a node for rendering the Score content

ReactNode

undefined

data

The dataset rendered by the chart

ChartData[]

-

description?

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

string

undefined

empty?

Sets empty state of chart with default message or you can define custom message

boolean | { message: ReactNode }

undefined

empty?

Sets empty state of chart with default message or you can define custom message

boolean | { message: ReactNode }

undefined

id?

Sets an unique id for the chart

string

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

minWidth?

Applies min-width to the chart container

number

160

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

PieChartScoreValue

Name

Description

Type

Default

children

The content

ReactNode

-

suffix

Appends a node to the content

ReactNode

undefined

prefix

Prepends a node to the content

ReactNode

undefined

PieChartScoreLabel

Name

Description

Type

Default

children

The content

ReactNode

-