AreaChart
Presentational Chart.js area chart (Line with fill). Data must be provided via props; this component does no fetching of its own.
Presentational Chart.js area chart (Line with fill). Data must be provided via props; this component does no fetching of its own.
import { AreaChart } from "@tetherto/mdk-react-devkit";| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
data | Required | ChartData<"line", (number | Point | null)[], unknown> | — | Chart data - required, provided by parent |
options | Optional | _DeepPartialObject<CoreChartOptions<"line"> & ElementChartOptions<"line"> & PluginChartOptions<"line"> & DatasetChartOptions<"line"> & ScaleChartOptions<"line"> & LineControllerChartOptions> | undefined | — | Chart.js options - merged with defaults |
tooltip | Optional | ChartTooltipConfig | undefined | — | Custom HTML tooltip configuration. When provided, replaces the default Chart.js tooltip. |
height | Optional | number | undefined | — | Chart height in pixels |
className | Optional | string | undefined | — | — |
Usage
Presentational Chart.js area chart (Line with fill). Data must be provided
via props — no data fetching.
Example
/** * Runnable example for AreaChart. */import { AreaChart } from '@tetherto/mdk-react-devkit'const labels = Array.from({ length: 12 }, (_, i) => `m${i + 1}`)const data = { labels, datasets: [ { label: 'Pool A', borderColor: '#4f9ef5', data: labels.map((_, i) => 100 + Math.sin(i / 3) * 8 + Math.random() * 2), }, ],}export const AreaChartExample = () => { return <AreaChart data={data} height={280} />}