);
`

Features

- composeable: mix and match as many Line's within a single Frame
- SVG-based
- flexible intra-data color options
- fluid width. Wrap Frame in your own container to constrain width.

API

See: https://amoradi.github.io/scintilla/documentation

Types

`ts
type Color = {
gradient?: RGBA | RGBA[];
solid?: RGBA | RGBA[];
};
`

`ts
type RGBA = [0-255, 0-255, 0-255, 0-1]
`

`ts
type Stroke = {
width: number;
style: "dash" | "solid";
color: Color;
};
`

Components

$3

Responsive container for all data-needy child components. Wrap Frame in your own container to constrain width.

- height?: number
Optionally specify height in pixels. Defaults to 50px.

- yRange?: [min, max]
Optionally plot children components with this y axis constraint.

Example

`jsx



`

---

$3

Plot your series data as a line. Style line with stroke, fill or both.

- data: number[]
The list of y data to plot.

- stroke?: Stroke
Set width in pixels, style as 'dash' or 'solid' and color option.

- fill?: Color
Solid or gradient fill, with one or many colors. Fills area from data line to bottom axis.

Example

`jsx



`

---

$3

Circular marker positioned at data[index]. Make as many as you like.

- data: number[]
The list of y data Marker will render from.

- color?: RGBA
The rgba fill color. Defaults to red.

- index?: number
position marker at data[index]. If ommited, defaults to last index.

- size?: number<1-10>
Diameter of Marker circle in pixels. Defaults to 4px.

Example

`jsx



``

Examples

See: https://amoradi.github.io/scintilla

License

MIT