---
alias: "fc.chart.bar.wrapper.source"
aliases:
  - fc.chart.bar.wrapper.source
category: wrapper
module: Core
---
# fc.chart.bar.wrapper.source

Bar chart wrapper that converts Metrics API source data into a Recharts-readable format, used for Sources Dashboard visualizations.

> **Note:** `fc.chart.bar.md` lists this as an alias. This file documents the wrapper-specific behavior and Metrics API integration. For general bar chart usage with standard GraphQL data, see `fc.chart.bar`.

## When to Use
- Visualizing inventory source metrics as bar charts
- Sources Dashboard bar chart displays
- Any Metrics API data that needs bar chart visualization

## Key Props
| Prop | Type | Required | What it controls |
|------|------|----------|------------------|
| `dataSource` | string | **Yes** | Path to Metrics API GraphQL data |
| `XAxis` | Axis | **Yes** | X-axis configuration (data key, ticks, labels) |
| `YAxis` | Axis | No | Y-axis configuration |
| `bars` | Bar[] | **Yes** | Bar series definitions (data keys, colors, stacking) |
| `chartContainerConfig` | ResponsiveContainerConfig | No | Responsive container sizing |
| `legend` | boolean | No | Show chart legend (generated from Bar `name` or `dataKey`) |
| `tooltip` | boolean | No | Show hover tooltips on bars |
| `title` | string | No | Chart card title |
| `width` | CardWidth | No | Card width: `"quarter"`, `"third"`, `"half"`, `"two-thirds"`, `"full"`, or 1-12 (default: `"full"`) |
| `noCard` | boolean | No | Render without card background when `true` |

### Axis
| Prop | Type | Required | What it controls |
|------|------|----------|------------------|
| `dataKey` | string | No | Key in the data for axis values |
| `tick` | boolean | No | Show axis ticks (default: `true`) |
| `tickLine` | boolean | No | Show axis tick lines (default: `true`) |
| `axisline` | boolean | No | Show axis line (default: `true`) |
| `label` | string | No | Axis label text |
| `offset` | number | No | Label offset from axis (y-axis default: `-20`) |
| `angle` | number | No | Label rotation angle (y-axis default: `-90`) |
| `position` | string | No | Label position: `"insideBottom"`, `"insideLeft"`, `"top"`, `"right"`, etc. |

### Bar
| Prop | Type | Required | What it controls |
|------|------|----------|------------------|
| `dataKey` | string | **Yes** | Data key for bar values (must be unique per bar) |
| `stackId` | string | No | Stack ID -- bars with same `stackId` are stacked |
| `fill` | string | No | Bar color in HEX format, e.g., `"#8B45E4"` |

### ResponsiveContainerConfig
| Prop | Type | Required | What it controls |
|------|------|----------|------------------|
| `width` | string/number | No | Container width (default: `"100%"`) |
| `aspect` | number | No | Width/height ratio (default: `1`) |
| `maxHeight` | number | No | Maximum container height (default: `300`) |
| `height` | string/number | No | Fixed or percentage height |
| `minWidth` | string/number | No | Minimum container width |
| `minHeight` | string/number | No | Minimum container height |

## Data Binding
Transforms Metrics API source response data into the array-of-objects format expected by Recharts. The `dataSource` prop points to the Metrics API result path. The wrapper handles the data shape conversion.

## Descendants
No -- self-contained chart component.

## Composition Patterns
- `fc.page` > `fc.chart.bar.wrapper.source` alongside `fc.list.wrapper.source` for full Sources Dashboard
- Use `noCard: true` when embedding inside an `fc.card.multi`
- Pair with `fc.daterange.wrapper.forwarder` for time-filtered source charts

## Gotchas
- Only works with Metrics API data -- use `fc.chart.bar` for standard GraphQL data
- `XAxis` and `bars` are required -- chart will not render without them
- On mobile, card width auto-collapses to full width regardless of `width` setting
- Stacked bars require matching `stackId` values on two or more Bar entries

## Manifest Example
```json
{
  "component": "fc.chart.bar.wrapper.source",
  "props": {
    "title": "Source Throughput",
    "dataSource": "sourceMetrics",
    "width": "half",
    "XAxis": { "dataKey": "date" },
    "YAxis": { "label": "Count" },
    "bars": [
      { "dataKey": "success", "fill": "#4CAF50" },
      { "dataKey": "failed", "fill": "#D23B3B", "stackId": "total" },
      { "dataKey": "pending", "fill": "#EF8F00", "stackId": "total" }
    ],
    "legend": true,
    "tooltip": true
  }
}
```

## AI Parse Notes
- **Primary intent:** Declarative Mystique component definition for manifests.
- **Selection signals:** Match by `alias`, category, and required `Key Props`.
- **Assembly hints:** Combine with compatible parent/child components listed in `Composition Patterns`.
- **Safety checks:** Validate required props and data bindings before manifest generation.
