```markdown
## BarChart Component

A bar chart visualizes data as a series of data points using bars.

### SDK Version

8.x, 9.x

### To add the BarChart component to your app:

```javascript
import { BarChart } from '@stripe/ui-extension-sdk/ui';
```

The following shows a preview of the BarChart UI component:

```jsx
const sales = [
  { date: 'Jan', sold: 1 },
  { date: 'Feb', sold: 4 },
  { date: 'Mar', sold: 2 },
  { date: 'Apr', sold: 3 },
];

return (
  <Box css={{ width: 'fill' }}>
    <BarChart data={sales} x="date" y="sold" />
  </Box>
);
```

### BarChart Props

| Property | Type                                | Required | Description                                                              |
| :------- | :---------------------------------- | :------- | :----------------------------------------------------------------------- |
| `data`   | `{ [x: string]: any; }[]`           | Yes      | The data used to generate the chart.                                     |
| `x`      | `string \| number \| Channel`       | Yes      | The property or accessor for the point on the x axis. Related types: Channel. |
| `y`      | `string \| number \| Channel`       | Yes      | The property or accessor for the point on the y axis. Related types: Channel. |
| `axis`   | `"x" \| "y" \| "both" \| "none"`    | No       | Determines whether to render labels and ticks for each axis.             |
| `color`  | `string \| number \| Channel`       | No       | Groups data by color based on a property or accessor. Related types: Channel. |
```