Area Chart

About this piece

SVG line with a soft gradient fill beneath. Tone colors the stroke and fade.

Usage

The import and the props worth knowing about, in one place.

import { Chart5 } from "@/components/beste/piece/chart5";

<Chart5
  surface="card"
  bordered={false}
  inverted={false}
  label="MRR · 90d"
  value="$124K"
  data={[
    20,
    28,
    24,
    34,
    40,
    38,
    48,
    52,
    60,
    58,
    72,
    84
  ]}
  tone="success"
/>