import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import AllocationBar from './AllocationBar';

# AllocationBar

The Allocation Bar is a component to show percentage of different allocations.

## Props

<ArgsTable of={AllocationBar} />

## Usage

Basic usage

```javascript
<AllocationBar
  allocations={[
    { label: 'Fund', color: 'allocationBarDarkBlue', weight: 88 },
    { label: 'ETF', color: 'allocationBarLightBlue', weight: 12 },
  ]}
/>
```