---
alias: "fc.chart.bar"
aliases:
  - fc.chart.bar
  - fc.chart.bar.wrapper.source
  - fc.chart.line
  - fc.chart.area
  - fc.chart.area.wrapper.feed
  - fc.chart.gauge
  - fc.chart.gauge.wrapper.threshold
category: content
module: Core
---
# fc.chart.bar

Recharts-based data visualization. Covers: bar charts (comparisons), line charts (trends), area charts (cumulative), gauge charts (thresholds).

## When to Use
- Analytics dashboards
- Data trend visualization
- KPI gauge displays

## Key Props
| Prop | Type | Required | What it controls |
|------|------|----------|------------------|
| `dataSource` | string | **Yes** | Path to chart data |
| `xAxis` | AxisConfig | No | X-axis data key, ticks, labels |
| `yAxis` | AxisConfig | No | Y-axis configuration |
| `bars` / `lines` / `areas` | ChartSeries[] | No | Series definitions with dataKey, color |
| `legend` | boolean | No | Show legend |
| `tooltip` | boolean | No | Show hover tooltips |
| `title` | string | No | Chart title |
| `width` | CardWidth | No | Chart container width |

## Manifest Example
```json
{
  "component": "fc.chart.bar",
  "props": {
    "dataSource": "orderMetrics",
    "title": "Orders by Status",
    "bars": [{ "dataKey": "count", "color": "#1976d2" }],
    "xAxis": { "dataKey": "status" }
  }
}
```

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