# Line series
Plot readings with a nullable gap and a scale-adjusted marker.

## APIs demonstrated

- [LineSeries](/reference/components/line-series/) from `@pibbl/core/viz`
- [ScaleAdjust](/reference/components/scale-adjust/) from `@pibbl/core/viz`
- [LineCoordinate](/reference/components/line-series/) from `@pibbl/core/viz`
- [LineAccessor](/reference/components/line-series/) from `@pibbl/core/viz`
- [LineCurve](/reference/components/line-series/) from `@pibbl/core/viz`
- [LineSeriesStyle](/reference/components/line-series/) from `@pibbl/core/viz`
- [LineSeriesProps](/reference/components/line-series/) from `@pibbl/core/viz`
- [ScaleAdjustProps](/reference/components/scale-adjust/) from `@pibbl/core/viz`

## Complete example

[Plain source](/minimal/viz/lines.tsx). Run as a browser module after the document body exists. TSX uses `jsx: "react-jsx"` and `jsxImportSource: "@pibbl/core"`.

```tsx
import { pibbl } from "@pibbl/core";
import { Axis, LineSeries, ScaleAdjust, type LineAccessor, type LineCoordinate, type LineCurve, type LineSeriesProps, type LineSeriesStyle, type ScaleAdjustProps, LinearScale } from "@pibbl/core/viz";

type Reading = { day: number; value: number | null };
const data: readonly Reading[] = [
  { day: 1, value: 18 },
  { day: 2, value: 32 },
  { day: 3, value: null },
  { day: 4, value: 27 },
];
const x: LineAccessor<Reading> = "day";
const y: LineAccessor<Reading> = (datum): LineCoordinate => datum.value;
const curve: LineCurve = "linear";
const style: LineSeriesStyle = { stroke: "#0f766e", strokeWidth: 3 };
const line: LineSeriesProps<Reading> = {
  data,
  x,
  y,
  xScale: "day",
  yScale: "value",
  curve,
  style,
};
const marker: ScaleAdjustProps = {
  x: 2,
  xScale: "day",
  children: <Axis scale="value" position="right" />,
};
const canvas = document.createElement("canvas");
canvas.width = 320;
canvas.height = 220;
document.body.append(canvas);
const app = pibbl(
  canvas,
  <LinearScale
    id="day"

    domain={[1, 4]}
    range="width"
    style={{ width: 320, height: 220 }}
  >
    <LinearScale id="value"  domain={[0, 40]} range="height" reverse>
      <LineSeries {...line} />
      <ScaleAdjust {...marker} />
    </LinearScale>
  </LinearScale>,
);
window.addEventListener("pagehide", () => app.dispose(), { once: true });

```

## Usage notes

- Shows isolated line marks and a nullable gap, not a complete chart with axes.

## Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.