Bar Chart Card

React

Is new design vision part implemented using new tokens?

Up to date

Storybook

React guidance

Source

GitHub code

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


                                                        
                                                        
                                                            import { BarChartCard } from '@optimus-web/core';
                                                        
                                                        <BarChartCard
                                                            chart={{
                                                                id: 'demo-bar-chart-in-card',
                                                                yAxisWidth: 32,
                                                                data,
                                                                stacked: true,
                                                                reference: {
                                                                    value: Math.round(average * 100) / 100,
                                                                    label: 'Average',
                                                                },
                                                            }}
                                                            id="demo-bar-chart-card"
                                                            title="Booked services"
                                                            subtitle="Last 7 days"
                                                            menuActions={actions}
                                                            highlightScore={{
                                                              value: myValue,
                                                            }}
                                                        />

Name	Description	Type	Default
chart?	Bar chart	BarChartProps	undefined
empty?	Sets empty state of chart with default message or you can define custom message	boolean \| { message: ReactNode }	undefined
error?	Sets error state of chart with default message or you can define custom message	boolean \| { message: ReactNode }	undefined
highlightScore?	Configuration object for render the highlight score in the card header	HighlightScoreProps	undefined
id	Card id, used internally for AA	string	-
kpi?	Adds Kpi metric in the card between title and chart	ReactElement<ChartCardKpiProps>	undefined
loading?	Show skeleton loader	boolean	undefined
menuActions?	Collection of actions rendered inside the top right dropdown menu	ChartCardActions	undefined
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
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	-

Resources

Example

API