Bar Chart

React

Is new design vision part implemented using new tokens?

Up to date

Resources

Storybook

React guidance

Source

GitHub code

Example


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

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