Scintilla

types

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

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

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

Frame

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

// specify height in pixels. defaults to 50px.
height?: number

// plot children components with this y axis constraint.
yRange?: [min<number>, max<number>]

// example
// wrap frame in your own container to constrain width
<div style={{ width: '100px' }}>
  <Frame height={100} yRange={[0, 500]}>
    <Line />
  </Frame>
</div>

Line

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

// the list of y data to plot.
data: number[]

// set width in pixels, style as 'dash' or 'solid' and color option
stroke?: Stroke

// solid or gradient fill, with one or many colors. fills area from data line to bottom axis.
fill?: Color

// example
<div style={{ width: '100px' }}>
  <Frame>
    <Line
      data={[-1, 2, 6, 9, 11, 21]}
      stroke={{
        width: 1,
        style: "dash",
        color: {
          solid: [
            [255, 0, 0, 0.25],
            [255, 0, 0, 0.5],
            [255, 0, 0, 0.1]
          ]
        }
      }}
      fill={{
        gradient: [
          [255, 0, 0, 0.1],
          [255, 0, 0, 1]
        ]
      }}
    />
  </Frame>
</div>

Marker

Circular marker positioned at data[index].

// the list of y data marker will render from
data: number[]

// rgba fill color
color: RGBA

// position marker at data[index]. if ommited, defaults to last index.
index: number

// diameter of marker circle in pixels
size: numer<1-10>

// example
<div style={{ width: '100px' }}>
  <Frame>
    <Line
      data={[-1, 2, 6, 9, 11, 21]}
      fill={{
        gradient: [
          [255, 0, 0, 0.1],
          [255, 0, 0, 1]
        ]
      }}
    />
    {/* 2 red markers, at 5th and last index */}
    <marker
      data={[-1, 2, 6, 9, 11, 21]}
      color={[255,0,0,1]}
      size={5}
      index={5}
    />
    <marker
      data={[-1, 2, 6, 9, 11, 21]}
      color={[255,0,0,1]}
      size={5}
    />
  </Frame>
</div>