React
Is new design vision part implemented using new tokens?
React
Is new design vision part implemented using new tokens?
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
/>
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 |