> ## Documentation Index
> Fetch the complete documentation index at: https://docs.holydocs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Chart

Theme-aware charts with shared MDX syntax for line, area, bar, composed, pie, and radar views.

**Interactive playground** For isolated previews, theme switching, and sandbox editing, open [the Chart playground on holydocs.com](https://holydocs.com/components/chart).

## When to use

Use this component when the reader benefits from an active surface such as a form, quiz, chart, or draggable visual.

## Live Examples

Every example below renders the real component directly inside HolyDocs, followed by the exact MDX you can paste into a page.

### Trend Lines

Multi-series line chart with tooltip, legend toggles, and a goal line.

**Revenue trend**

**Revenue**
  **Target**
  **Pipeline**
  
  **Quarter goal**

~~~mdx
<Chart
  type="line"
  title="Revenue trend"
  description="Monthly revenue against target and weighted pipeline."
  xKey="month"
  height="auto"
  data={[
    {"month":"Jan","revenue":42000,"target":38000,"pipeline":51000},
    {"month":"Feb","revenue":46800,"target":41000,"pipeline":54800},
    {"month":"Mar","revenue":51200,"target":45000,"pipeline":59200},
    {"month":"Apr","revenue":49800,"target":47000,"pipeline":61000},
    {"month":"May","revenue":55600,"target":50000,"pipeline":64800},
    {"month":"Jun","revenue":60200,"target":54000,"pipeline":70200}
  ]}
>
  <ChartGrid vertical={false} />
  <ChartLegend align="left" />
  <ChartTooltip valueFormat="currency" />
  <ChartXAxis />
  <ChartYAxis tickFormat="currency" />
  <ChartSeries dataKey="revenue" label="Revenue" />
  <ChartSeries dataKey="target" label="Target" dashed />
  <ChartSeries dataKey="pipeline" label="Pipeline" axis="right" />
  <ChartYAxis position="right" tickFormat="currency" />
  <ChartReferenceLine axis="y" value={60000} label="Quarter goal" dashed />
</Chart>
~~~

### Composed Mix

Bar + area composition with a highlighted campaign window.

**Demand mix**

**Qualified signups**
  **Conversion rate**
  **Projected pipeline**
  **Campaign push**

~~~mdx
<Chart
  type="composed"
  title="Demand mix"
  description="Qualified signups, conversion rate, and projected pipeline in one surface."
  xKey="week"
  height="auto"
  data={[
    {"week":"W1","signups":180,"rate":24,"pipeline":36000},
    {"week":"W2","signups":220,"rate":27,"pipeline":40200},
    {"week":"W3","signups":248,"rate":31,"pipeline":43800},
    {"week":"W4","signups":284,"rate":33,"pipeline":49600},
    {"week":"W5","signups":264,"rate":30,"pipeline":47200},
    {"week":"W6","signups":312,"rate":36,"pipeline":55800}
  ]}
>
  <ChartGrid />
  <ChartLegend align="left" />
  <ChartTooltip />
  <ChartXAxis />
  <ChartYAxis tickFormat="integer" />
  <ChartYAxis position="right" tickFormat="currency" />
  <ChartSeries type="bar" dataKey="signups" label="Qualified signups" />
  <ChartSeries type="line" dataKey="rate" label="Conversion rate" axis="left" dashed />
  <ChartSeries type="area" dataKey="pipeline" label="Projected pipeline" axis="right" fillOpacity={0.18} />
  <ChartReferenceArea x1="W3" x2="W4" label="Campaign push" />
</Chart>
~~~

### Stacked Bars

Stacked horizontal bars with brush support for denser datasets.

**Pipeline by team**

**Qualified**
  **Proposal**
  **Negotiation**

~~~mdx
<Chart
  type="bar"
  title="Pipeline by team"
  description="Each bar is stacked by stage and can switch series visibility from the legend."
  xKey="team"
  layout="vertical"
  stacked
  height="auto"
  data={[
    {"team":"Enterprise","qualified":24,"proposal":18,"negotiation":12},
    {"team":"Mid-market","qualified":30,"proposal":22,"negotiation":14},
    {"team":"SMB","qualified":42,"proposal":28,"negotiation":16},
    {"team":"Partners","qualified":18,"proposal":12,"negotiation":8}
  ]}
>
  <ChartLegend align="left" />
  <ChartTooltip />
  <ChartGrid vertical={true} horizontal={false} />
  <ChartSeries dataKey="qualified" label="Qualified" stackId="stage" />
  <ChartSeries dataKey="proposal" label="Proposal" stackId="stage" />
  <ChartSeries dataKey="negotiation" label="Negotiation" stackId="stage" />
</Chart>
~~~

### Donut Split

Pie / donut chart with a centered summary.

**Acquisition split**

**Share**
  **Top channel**

~~~mdx
<Chart
  type="pie"
  title="Acquisition split"
  description="Share of sourced opportunities by channel."
  xKey="channel"
  height="auto"
  innerRadius="62%"
  outerRadius="86%"
  data={[
    {"channel":"Organic","share":38},
    {"channel":"Partner","share":24},
    {"channel":"Paid","share":18},
    {"channel":"Community","share":12},
    {"channel":"Outbound","share":8}
  ]}
>
  <ChartLegend position="bottom" align="center" />
  <ChartTooltip valueFormat="percent" />
  <ChartSeries dataKey="share" label="Share" nameKey="channel" innerRadius="62%" outerRadius="86%" />
  <ChartCenter label="Top channel" value="Organic" description="38% of sourced pipeline" />
</Chart>
~~~

### Radar Comparison

Radar chart for comparing multiple teams against the same scoring rubric.

**Team capability radar**

**Core**
  **Growth**
  **Platform**

~~~mdx
<Chart
  type="radar"
  title="Team capability radar"
  description="Normalized scores across product, GTM, and reliability disciplines."
  xKey="metric"
  height="auto"
  data={[
    {"metric":"Velocity","core":82,"growth":74,"platform":68},
    {"metric":"Quality","core":78,"growth":66,"platform":88},
    {"metric":"Reliability","core":72,"growth":61,"platform":92},
    {"metric":"Insight","core":69,"growth":84,"platform":58},
    {"metric":"Execution","core":88,"growth":79,"platform":73}
  ]}
>
  <ChartLegend align="center" />
  <ChartTooltip />
  <ChartSeries dataKey="core" label="Core" />
  <ChartSeries dataKey="growth" label="Growth" />
  <ChartSeries dataKey="platform" label="Platform" />
</Chart>
~~~

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `type` | `string` | `line` | Chart family to render. |
| `data` | `JSON` | `[]` | JSON array of chart rows. Use valid JSON in MDX expressions. |
| `xKey` | `string` | `--` | Category key used for cartesian axes or pie labels. |
| `height` | `string \| number` | `auto` | Chart stage height. Accepts numbers in px, CSS lengths, or "auto" for responsive defaults. |
| `layout` | `string` | `horizontal` | Use "vertical" for horizontal bar charts. |
| `stacked` | `boolean` | `false` | Stacks compatible area/bar series on the same baseline. |
| `download` | `boolean` | `true` | Shows the Download SVG control in the chart toolbar. |
| `legend` | `boolean` | `true` | Shows the interactive legend unless a  child overrides it. |
| `tooltip` | `boolean` | `true` | Shows the hover tooltip unless a  child overrides it. |
| `grid` | `boolean` | `true` | Shows the chart grid unless a  child overrides it. |

## Usage

Start from this baseline shape and then tailor the copy, data, or nesting to the page you are writing.

~~~mdx
<Chart
  type="line"
  title="Revenue trend"
  description="Monthly revenue against target and weighted pipeline."
  xKey="month"
  height="auto"
  data={[
    {"month":"Jan","revenue":42000,"target":38000,"pipeline":51000},
    {"month":"Feb","revenue":46800,"target":41000,"pipeline":54800},
    {"month":"Mar","revenue":51200,"target":45000,"pipeline":59200},
    {"month":"Apr","revenue":49800,"target":47000,"pipeline":61000},
    {"month":"May","revenue":55600,"target":50000,"pipeline":64800},
    {"month":"Jun","revenue":60200,"target":54000,"pipeline":70200}
  ]}
>
  <ChartGrid vertical={false} />
  <ChartLegend align="left" />
  <ChartTooltip valueFormat="currency" />
  <ChartXAxis />
  <ChartYAxis tickFormat="currency" />
  <ChartSeries dataKey="revenue" label="Revenue" />
  <ChartSeries dataKey="target" label="Target" dashed />
  <ChartSeries dataKey="pipeline" label="Pipeline" axis="right" />
  <ChartYAxis position="right" tickFormat="currency" />
  <ChartReferenceLine axis="y" value={60000} label="Quarter goal" dashed />
</Chart>
~~~

## Tips

- Explain what changes when a reader interacts with the component. Motion or controls alone should not carry the full meaning.
- Keep a non-interactive fallback in mind for screenshots, exported docs, and AI-driven readers that only see the resulting HTML.
- Verify keyboard behavior and focus states whenever the component includes inputs, toggles, or draggable controls.

## Related Components

**[Color](/components/color)**

Visual color swatch with hex value and optional name, useful for design system documentation.
**[Form](/components/form)**

Embeddable forms that collect user input and send it via email.
**[Carousel](/components/carousel)**

Embla-style carousel for screenshots, product tours, quotes, and gallery cards with optional autoplay.

## More

- Interactive playground: [Chart on holydocs.com](https://holydocs.com/components/chart)
- Component library index: [/components](/components)