Progress 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 { ProgressChart } from '@optimus-web/core';
                                                        
                                                        <ProgressChart
                                                          animated={true}
                                                          data={data}
                                                          id="progress-chart"
                                                          title="My progress chart"
                                                          minWidth="400px"
                                                          labelFormatter={capitalize}
                                                          valueFormatter={myFormatter}
                                                          total={18524}
                                                          legend
                                                        />
                                                        
                                                            

API

Name

Description

Type

Default

animated?

Apply animation to the chart on load

boolean

true

cornerRadius?

Adds corner radius into chart

boolean

true

data

The dataset rendered by the chart

ChartData[]

-

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?

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

string

100%

title?

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

string

undefined

total?

If the data provided does not have percentage values, this prop is used to calculate them internally.

number

undefined

valueFormatter?

Callback for formatting the value inside the tooltip

ValueFormatter

undefined