Pie Chart Card

Component Status

React

Up to date

Usage


                                                        
                                                        
                                                            import { PieChartCard } from '@optimus-web/core';
                                                        
                                                        <PieChartCard 
                                                          title='Transactions'
                                                          subtitle='Last 7 days'
                                                          menuActions={actions}
                                                          trendScore={{
                                                              value: '+8.01%',
                                                              trend: 'positive',
                                                              direction: 'up',
                                                          }}
                                                          chart={{
                                                              id: 'demo-pie-chart',
                                                              data,
                                                              title: 'My pie chart title',
                                                              scoreValue: total.toLocaleString(),
                                                              scoreLabel: 'Payments',
                                                              minWidth: 140,
                                                              valueFormatter,
                                                              labelFormatter,
                                                              animated: true,
                                                          }}
                                                        />
                                                        
                                                            

Storybook

Open example in our Storybook

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

API

Name

Description

Type

Default

title

Card title rendered in the card header. Ellipsis is set to render one line. A width has to be defined in the parent component in order the text-overflow works properly.

string

-

id

Card id, used internally for AA

string

-

subtitle?

Card subtitle rendered in the card header. Ellipsis is set to render two lines. A width has to be defined in the parent component in order the text-overflow works properly.

string

undefined

menuActions?

Collection of actions rendered inside the top right dropdown menu

ChartCardActions

undefined

trendScore?

Trend score configuration object needed for render the TrendScore component in the card header

TrendScoreProps

undefined

chart?

Chart configuration object needed for render the card chart. Very similar to the options provided to the PieChart but extended with scoreValue and scoreLabel

PieChartConfig

undefined