Bar Chart

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 { BarChart } from '@optimus-web/core';
                                                        
                                                        <BarChart
                                                          data={data}
                                                          reference: {
                                                            value: Math.round(average * 100) / 100,
                                                            label: 'Average',
                                                          },
                                                          yAxisWidth={32}
                                                          tickCount={7}
                                                          minHeight={300}
                                                          minWidth={750}
                                                          animated={true}
                                                          description="This is a description"
                                                          title="Bar Chart"
                                                          id="bar-chart"
                                                          domain={[0, 6]}
                                                          labelFormatter={capitalize}
                                                          valueFormatter={myFormatter}
                                                          variant="horizontal"
                                                          legend
                                                        />

Name	Description	Type	Default
animated?	Apply animation to the chart on load	boolean	true
axisLabelCharLimit?	Defines the number of max characters an axis label can render. If the label does not fit, it will render an ellipsis at the end. This is the way for controlling the label length, along with the yAxisWidth prop	number	14
axisTickInterval?	Defines how many and the pattern for rendering the axis labels. 0 will render all labels, 1 will skip even labels, 2 will skip out of each 3, and so on. It's a simplification of the interval axis prop in Recharts	number	undefined
data	The dataset rendered by the chart	BarChartData	-
domain?	Sets the range of the axis. Please refer to Recharts docs for more info	Array \| Function	[0, "auto"]
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
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
legendOffset?	Defines the top and left position properties for the Legend component. Used to fine tuning the position when needed, like in the card usage.	{ x?: number; y?: number; }	undefined
loading?	Show skeleton loader	boolean	undefined
minHeight?	Applies min-height to the chart container	number	200
minWidth?	Applies min-width to the chart container	number	500
reference?	Renders the reference line in the chart, if provided.	{ value: number; label: string; }	undefined
stacked?	Renders the bars as a stack, one on top of each other	boolean	false
tickFormatter?	Callback for formatting values on Y axis	TickFormatter	undefined
tickCount?	The number of axis ticks. Please refer to Recharts docs for more info	number	undefined If domain is defined Math.ceil(domain[1]) + 1 so we match the ticks and the domain.
title?	Chart title, used for aria label, does not render in the UI	string	undefined
valueFormatter?	Callback for formatting the value inside the tooltip	ValueFormatter	undefined
variant?	Defines the layout of the chart.	horizontal \| vertical	horizontal
yAxisWidth?	Defines the width of the yAxis, This control is needed to make space for long labels	number	32

Resources

Example

API