# C line chart 1

> API latency — p50, p90 and p99 over a day

A shadcn/ui block from the [@cnippet](https://ui.cnippet.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet/c-line-chart-1).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/c-line-chart-1
- Screenshot: https://shadcn.exchange/shot/cnippet/c-line-chart-1/light.png
- Registry item: https://ui.cnippet.dev/r/c-line-chart-1.json
- Categories: line chart
- Listed: 2026-10-27, source last changed 2026-10-27

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/cnippet/c-line-chart-1.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@cnippet/line-chart`, `@cnippet/chart-card`

## Files

### `registry/default/chart-variants/c-line-chart-1.tsx`

```tsx
"use client";

import { ChartCard } from "@/registry/default/charts/chart-card";
import { LineChart } from "@/registry/default/charts/line-chart";

// API latency percentiles (ms) over a day.
const data = [
  { p50: 82, p90: 164, p99: 412, time: "00:00" },
  { p50: 78, p90: 151, p99: 388, time: "03:00" },
  { p50: 91, p90: 182, p99: 455, time: "06:00" },
  { p50: 118, p90: 236, p99: 618, time: "09:00" },
  { p50: 126, p90: 252, p99: 702, time: "12:00" },
  { p50: 121, p90: 241, p99: 664, time: "15:00" },
  { p50: 104, p90: 208, p99: 531, time: "18:00" },
  { p50: 88, p90: 176, p99: 449, time: "21:00" },
];

const ms = (value: number) => `${value} ms`;

export default function ApiLatency() {
  return (
    <ChartCard
      className="max-w-2xl"
      delta={0.041}
      description="Response time percentiles, last 24 hours"
      invertDelta
      title="API latency"
      value={ms(104)}
    >
      <LineChart
        categories={["p50", "p90", "p99"]}
        className="h-48"
        config={{
          p50: { label: "p50" },
          p90: { label: "p90" },
          p99: { label: "p99" },
        }}
        data={data}
        index="time"
        valueFormatter={ms}
        yAxisWidth={64}
      />
    </ChartCard>
  );
}
```