A compact line or area trend for tables and cards.
A compact line or area trend for tables and cards.
import { Sparkline } from '@vrum/ui';
<Sparkline
data={[12,18,15,24,28,22,35,42]}
type={"line"}
color={"#829c46"}
width={160}
height={40}
label={"Project trend"}
/>| Prop | Type | Default | Description |
|---|---|---|---|
data* | number[] | none | Data used to render this component. |
type | "area" | "line" | "line" | Interaction or visualization type. |
color | string | "#829c46" | CSS color for the component. |
width | number | 120 | Width used for the SVG viewBox. |
height | number | 32 | Height of the component in pixels. |
label | string | "Trend" | Visible or accessible label. |
className | string | none | Additional CSS classes. |
id | string | none | id configuration. |
name | string | none | name configuration. |
style | CSSProperties | none | Inline style overrides. |
href | string | none | href configuration. |
aria-invalid | boolean | "false" | "true" | "grammar" | "spelling" | none | Indicates the entered value does not conform to the format expected by the application. |
aria-label | string | none | Defines a string value that labels the current element. |
children | ReactNode | none | Content rendered inside the component. |
onFocus | FocusEventHandler<SVGSVGElement> | none | on focus configuration. |
onBlur | FocusEventHandler<SVGSVGElement> | none | on blur configuration. |
onChange | ChangeEventHandler<SVGSVGElement, Element> | none | Called when the input value changes. |
onSubmit | SubmitEventHandler<SVGSVGElement> | none | Called when the form is submitted. |
onKeyDown | KeyboardEventHandler<SVGSVGElement> | none | on key down configuration. |
onClick | MouseEventHandler<SVGSVGElement> | none | Called when the control is activated. |
onSelect | ReactEventHandler<SVGSVGElement> | none | on select configuration. |