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

# <Chart.Metric />

> A single number, rendered large.

```js theme={"system"}
import {Chart} from "attio/client"
```

`Chart` is a namespace, not a renderable component. Use `Chart.Metric`.

A metric has no axes and no data array: its `value` and `label` sit directly on the component.

See [Using charts](../../guides/using-charts) for height tokens, color tokens, and `format`.

## Example

```tsx TypeScript theme={"system"}
import {Chart} from "attio/client"

export function MyDialog() {
  return <Chart.Metric title="Pipeline" value={42} label="Open deals" format="number" />
}
```

## Props

<ParamField path="value" type="number" required>
  The number, run through `format`.
</ParamField>

<ParamField path="label" type="string">
  A caption under the number.
</ParamField>

<ParamField path="format" type="'number' | 'compact' | 'percent' | 'currency' | 'date' | 'datetime'">
  How the value is rendered. See [Using charts](../../guides/using-charts#format).
</ParamField>

<ParamField path="currency" type="string">
  An ISO 4217 code, for example `"USD"`. Required when `format` is `"currency"`, and rejected for
  every other format.
</ParamField>

<ParamField path="color" type="'blue' | 'green' | 'yellow' | 'orange' | 'red' | 'purple' | 'pink' | 'teal' | 'grey'">
  The color of the metric.

  Defaults to `"blue"`.
</ParamField>

<ParamField path="title" type="string">
  A caption above the chart.
</ParamField>