TrendChart

Series over evenly spaced x positions, on a y axis of nice ticks that includes 0.

Source

Import

import { TrendChart } from "@flanksource/clicky-ui/data";

Demos

Line · Open in Storybook

Area · Open in Storybook

Single Series · Open in Storybook

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Prop	Type	Default	Description
className	string	—	—
height*	number	—	—
legend	boolean	—	Defaults to on for two or more series.
series*	ChartSeries[]	—	`values[i]` is the series' value at `x[i]`.
variant	enum	line	—
width*	number	—	—
x*	string[]	—	ISO dates or labels, drawn evenly spaced.
xFormat	(…) => string	—	Formats x labels; ISO dates default to "Aug 16".
yFormat	(…) => string	—	Formats y ticks and hover values. Ticks default to SI-short (1.2K), hover values to grouped digits.