---
title: "GaugeChart"
description: "A rate from 0 to 1 as a dial, printed as a percentage in the middle. With no rate (nothing measured) it shows the empty note."
---

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

# GaugeChart

## Success rate

```tsx
import { ChartPanel, GaugeChart } from '@arbol-ai/ui/charts';

<div className="grid gap-4 md:grid-cols-2">
  <ChartPanel note="Conversations that ended well" title="Success rate">
    <GaugeChart aria-label="Success rate" value={0.782} />
  </ChartPanel>
  <ChartPanel note="No conversations were evaluated" title="Success rate, new agent">
    <GaugeChart aria-label="Success rate of the new agent" value={null} />
  </ChartPanel>
</div>
```

## Source

The examples above are [`src/charts/gauge-chart.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/charts/gauge-chart.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/charts/gauge-chart/index.mdx