Progress Chart

Component Status

React

Up to date

Usage


                                                        
                                                        
                                                            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
                                                        />
                                                        
                                                            

Storybook

Open example in our Storybook

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

API

Name

Description

Type

Default

title?

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

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

string

100%

data

The dataset rendered by the chart

ChartData[]

-

id?

Sets an unique id for the chart

string

undefined

total?

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

number

undefined

legend?

Enables the legend component on top of the chart

boolean

false