---
alias: "fc.chart.area.wrapper.feed"
aliases:
  - fc.chart.area.wrapper.feed
category: wrapper
module: Core
---
# fc.chart.area.wrapper.feed

Area chart wrapper that converts Metrics API feed data into a Recharts-readable format, used for Feeds Dashboard visualizations.

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

## When to Use
- Visualizing inventory feed metrics as area charts (cumulative trends)
- Feeds Dashboard area chart displays
- Any Metrics API feed data that needs area chart visualization

## Key Props
| Prop | Type | Required | What it controls |
|------|------|----------|------------------|
| `dataSource` | string | **Yes** | Path to Metrics API GraphQL feed data |
| `path` | string | No | Sub-path to chart data within the data source |
| `XAxis` | Axis | **Yes** | X-axis configuration (tick lines, axis lines) |
| `YAxis` | Axis | No | Y-axis configuration |
| `chartContainerConfig` | ChartContainerConfig | No | Responsive container sizing |
| `tooltip` | boolean | No | Show hover tooltips |
| `legend` | boolean | No | Show chart legend |
| `cartesianGrid` | CartesianGrid | No | Grid line configuration |
| `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 |
|------|------|----------|------------------|
| `tickLine` | boolean | No | Show axis tick lines (default: `true`) |
| `axisline` | boolean | No | Show axis line (default: `true`) |

### CartesianGrid
| Prop | Type | Required | What it controls |
|------|------|----------|------------------|
| `strokeDasharray` | string | **Yes** | Pattern of dashes and gaps for grid lines, e.g., `"3 3"` |

### ChartContainerConfig
| 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: `200`) |
| `height` | string/number | No | Fixed or percentage height |
| `minWidth` | string/number | No | Minimum container width |
| `minHeight` | string/number | No | Minimum container height |
| `debounce` | number | No | Resize event debounce in ms (default: `1`) |

## Data Binding
Transforms Metrics API feed response data into the array-of-objects format expected by Recharts. The `dataSource` prop points to the Metrics API result path. The optional `path` prop drills into a sub-path of the data.

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

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

## Gotchas
- Only works with Metrics API feed data -- use `fc.chart.area` for standard GraphQL data
- `dataSource` and `XAxis` are required
- `cartesianGrid.strokeDasharray` is required when `cartesianGrid` is specified
- Default `maxHeight` is `200` (different from bar chart wrapper's `300`)

## Manifest Example
```json
{
  "component": "fc.chart.area.wrapper.feed",
  "props": {
    "title": "Feed Activity",
    "dataSource": "feedMetrics",
    "width": "half",
    "XAxis": { "tickLine": false },
    "YAxis": { "axisline": false },
    "cartesianGrid": { "strokeDasharray": "3 3" },
    "tooltip": true,
    "legend": true,
    "chartContainerConfig": {
      "maxHeight": 250,
      "aspect": 2
    }
  }
}
```

## 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.
