# Inline charts (/docs/inline-charts)

`@microcharts/react` renders charts small enough to sit _inside_ the interface you already ship: a trend in a table
cell, a sparkline after a number, a bullet in a KPI, a mark in a streamed reply. For a full dashboard canvas, reach for
a [full chart library](/docs/full-chart-libraries) instead.

<CatalogTotal /> types, one grammar, zero runtime dependencies. Size band: <SizeMarketing />. Static entries ship **zero
client JavaScript** from a React Server Component. Every chart is an `img` with a summary generated from the data.

## One mark, four homes

**In a sentence**

```tsx
<p>
  p95 latency this week{" "}
  <span className="mc-inline">
    <Sparkline data={[48, 45, 44, 40, 38, 36, 33, 31]} width={64} height={16} dots="none" summary={false} />
  </span>{" "}
  — trending down.
</p>
```

**In a table cell**

```tsx
<tr>
  <td>checkout-api</td>
  <td>
    <Sparkline data={[48, 45, 44, 40, 38, 36, 33, 31]} width={64} height={18} dots="none" summary={false} />
  </td>
  <td>31 ms</td>
</tr>
```

**In a KPI card**

```tsx
<div className="kpi">
  <span className="figure">1,600</span>
  <span className="unit">concurrent, now</span>
  <Sparkline data={[1240, 1310, 1290, 1420, 1380, 1510, 1470, 1600]} width={90} height={28} fill summary={false} />
</div>
```

**In a tab header**

```tsx
<button className="tab">
  CPU <Sparkline data={[62, 65, 61, 68, 70, 66, 72, 75]} width={40} height={14} dots="none" summary={false} />
</button>
```

## The surfaces

### In a sentence

Wrap with `mc-inline`, drop endpoint dots, mark decorative when the sentence already carries the meaning:

```tsx
<p>
  p95 latency this week{" "}
  <span className="mc-inline">
    <Sparkline data={latency} dots="none" summary={false} width={64} height={16} />
  </span>{" "}
  — trending down.
</p>
```

### In a table cell

```tsx
<table className="w-full max-w-sm text-sm tabular-nums">
  <thead className="sr-only">
    <tr>
      <th scope="col">Service</th>
      <th scope="col">Trend</th>
      <th scope="col">Now</th>
    </tr>
  </thead>
  <tbody>
    <tr className="border-b border-hairline">
      <td className="py-1.5 pr-3 text-fd-muted-foreground">checkout</td>
      <td className="py-1.5">
        <Sparkline data={[40, 38, 36, 34, 32, 31, 30, 31]} width={72} height={16} dots="none" summary={false} />
      </td>
      <td className="py-1.5 pl-3 text-right">31ms</td>
    </tr>
    <tr>
      <td className="py-1.5 pr-3 text-fd-muted-foreground">search</td>
      <td className="py-1.5">
        <Sparkline data={[80, 78, 82, 79, 81, 80, 79, 78]} width={72} height={16} dots="none" summary={false} />
      </td>
      <td className="py-1.5 pl-3 text-right">78ms</td>
    </tr>
  </tbody>
</table>
```

### In a KPI / tab

Attainment and cadence marks stay small enough for a card or a tab header: [Bullet](/docs/charts/bullet),
[Progress](/docs/charts/progress), [Delta](/docs/charts/delta), [StatusDot](/docs/charts/status-dot).

Exact placement recipes: [Composition](/docs/composition). Broader fit: [When to use microcharts](/docs/when-to-use).

## Server-component safe

Static charts are hook-free and listener-free, so they render to HTML with zero client JavaScript. Interactivity comes
from a separate `/interactive` subpath.

```tsx
// Server Component — no "use client", nothing to hydrate for the chart
import { Sparkline } from "@microcharts/react/sparkline";

export default function Row() {
  return <Sparkline data={[3, 5, 4, 8, 6, 9]} title="Weekly revenue" />;
}
```

## Start here

- [When to use microcharts](/docs/when-to-use)
- [React sparklines](/docs/react-sparklines)
- [Introduction](/docs) — grammar and catalog
- [Quickstart](/docs/quickstart)