Skip to content
Pibbl

Line series

Open full page

Read as Markdown

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

APIs demonstrated

Section titled “APIs demonstrated”

Complete example

Section titled “Complete example”

Plain source. Run as a browser module after the document body exists. TSX uses jsx: "react-jsx" and jsxImportSource: "@pibbl/core".

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

Section titled “Usage notes”
  • Shows isolated line marks and a nullable gap, not a complete chart with axes.

Documentation version

Section titled “Documentation version”

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