Bar Chart

React

Is new design vision part implemented using new tokens?

Up to date

Usage


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

Storybook

Open example in our Storybook

API

This component is a wrapper over Recharts BarChart, some properties refer directly to those used in Recharts.

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

number

500

minHeight?

Applies min-height to the chart container

number

200

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"]

tickCount?

The number of axis ticks. Please refer to Recharts docs for more info

number

undefined

If domain is definedMath.ceil(domain[1]) + 1

so we match the ticks and the domain.

reference?

Renders the reference line in the chart, if provided.

{

value: number;

label: string;

}

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

stacked?

Renders the bars as a stack, one on top of each other

boolean

false

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

id?

Sets an unique id for the chart

string

undefined

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