Point and custom plot series

Run Stop Open full page

Read as Markdown

Render styled point marks and custom keyed point content.

APIs demonstrated

• PointSeries from @pibbl/core/viz
• PointAccessor from @pibbl/core/viz
• PointMarkStyle from @pibbl/core/viz
• PointSeriesStyle from @pibbl/core/viz
• PointStyleResolver from @pibbl/core/viz
• PointSeriesProps from @pibbl/core/viz
• PlotSeries from @pibbl/core/viz
• PlotSeriesProps from @pibbl/core/viz
• PlotKeyAccessor from @pibbl/core/viz

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, Circle } from "@pibbl/core";
import { PlotSeries, PointSeries, ScaleAdjust, type PlotKeyAccessor, type PlotSeriesProps, type PointAccessor, type PointMarkStyle, type PointSeriesProps, type PointSeriesStyle, type PointStyleResolver, LinearScale } from "@pibbl/core/viz";

type Datum = { id: string; x: number; y: number; important: boolean };
const data: readonly Datum[] = [
  { id: "a", x: 1, y: 3, important: true },
  { id: "b", x: 2, y: 2, important: false },
];
const x: PointAccessor<Datum> = "x";
const mark: PointMarkStyle = { radius: 6, fill: "#ef4444" };
const style: PointStyleResolver<Datum> = (datum): PointSeriesStyle =>
  datum.important ? mark : { radius: 4, fill: "#0f766e" };
const points: PointSeriesProps<Datum> = {
  data,
  x,
  y: "y",
  xScale: "x",
  yScale: "y",
  style,
};
const keyBy: PlotKeyAccessor<Datum> = "id";
const plot: PlotSeriesProps<Datum> = {
  data,
  x,
  y: "y",
  xScale: "x",
  yScale: "y",
  keyBy,
  render: (datum) => (
    <ScaleAdjust x={datum.x} xScale="x" y={datum.y} yScale="y">
      <Circle style={{ radius: datum.important ? 2 : 1, fill: "#111827" }} />
    </ScaleAdjust>
  ),
};
const canvas = document.createElement("canvas");
canvas.width = 320;
canvas.height = 220;
document.body.append(canvas);
const app = pibbl(
  canvas,
  <LinearScale
    id="x"

    domain={[0, 3]}
    range="width"
    style={{ width: 320, height: 220 }}
  >
    <LinearScale id="y"  domain={[0, 4]} range="height" reverse>
      <PointSeries {...points} />
      <PlotSeries {...plot} />
    </LinearScale>
  </LinearScale>,
);
window.addEventListener("pagehide", () => app.dispose(), { once: true });

Usage notes

• Shows isolated point marks and keyed content, not a complete chart with axes.

Documentation version

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