Pie Chart

Component Status

React

Up to date

Usage


                                                        
                                                        
                                                            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>
                                                        
                                                            

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 PieChart, some properties refer directly to those used in Recharts.

PieChart

Name

Description

Type

Default

title?

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

string

undefined

description?

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

string

undefined

id?

Sets an unique id for the chart

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

160

data

The dataset rendered by the chart

ChartData[]

-

children?

Accepts a node for rendering the Score content

ReactNode

undefined

legend?

Enables the legend component on top of the chart

boolean

false

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

-