---
title: "TrendChart"
description: "One metric over a period, against the period before it. Use it for daily or weekly figures; the open-ended variant dashes today, which is still being counted."
---

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

# TrendChart

## Current against previous period

```tsx
import { ChartLegend, ChartPanel, TrendChart } from '@arbol-ai/ui/charts';
import type { TrendPoint } from '@arbol-ai/ui/charts';

const REACHED = [182, 205, 197, 240, 228, 96, 74, 210, 236, 251, 244, 262, 118, 131];

const BEFORE = [170, 188, 201, 215, 209, 88, 70, 195, 214, 220, 231, 226, 101, 97];

const DAYS: TrendPoint[] = REACHED.map((value, index) => ({
  date: new Date(2026, 9, 25 + index),
  value,
  previous: BEFORE[index] ?? null,
}));

<ChartPanel
  eyebrow="Last 14 days"
  legend={
    <ChartLegend
      items={[
        { label: 'This period', color: 'chart-1' },
        { label: 'Previous period', color: 'chart-neutral' },
      ]}
    />
  }
  note="2,674 contacts reached"
  title="Contacts reached"
>
  <TrendChart
    aria-label="Contacts reached per day"
    currentLabel="This period"
    data={DAYS}
    isOpenEnded
    previousLabel="Previous period"
  />
</ChartPanel>
```

## Daily bars and rates

Bars read as discrete daily amounts; formatOptions prints 0–1 rates as percentages.

```tsx
import { TrendChart } from '@arbol-ai/ui/charts';
import type { TrendPoint } from '@arbol-ai/ui/charts';

const REACHED = [182, 205, 197, 240, 228, 96, 74, 210, 236, 251, 244, 262, 118, 131];

const BEFORE = [170, 188, 201, 215, 209, 88, 70, 195, 214, 220, 231, 226, 101, 97];

const DAYS: TrendPoint[] = REACHED.map((value, index) => ({
  date: new Date(2026, 9, 25 + index),
  value,
  previous: BEFORE[index] ?? null,
}));

const RATE: Intl.NumberFormatOptions = { style: 'percent', maximumFractionDigits: 1 };

<div className="grid gap-4 md:grid-cols-2">
  <TrendChart
    aria-label="Calls per day"
    currentLabel="This period"
    data={DAYS}
    previousLabel="Previous period"
    variant="bars"
  />
  <TrendChart
    aria-label="Answer rate per day"
    currentLabel="Answer rate"
    data={DAYS.map((day) => ({ date: day.date, value: day.value === null ? null : day.value / 300 }))}
    formatOptions={RATE}
    variant="line"
  />
</div>
```

## Source

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

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