Skip to content
Pibbl

Pie chart composition

Open full page

Read as Markdown

Compute pie geometry and render labeled donut slices.

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 {
  PieLabel,
  PieLayout,
  PieSlice,
  pieSlices,
  type PieLabelLayout,
  type PieLabelPlacement,
  type PieLabelProps,
  type PieLabelStyle,
  type PieLayoutProps,
  type PieLayoutSlice,
  type PieLayoutStyle,
  type PieOptions,
  type PieSliceGeometry,
  type PieSliceProps,
  type PieSliceStyle,
} from "@pibbl/core/viz";


type Datum = { name: string; value: number; color: string };
const data: readonly Datum[] = [
  { name: "Design", value: 35, color: "#0f766e" },
  { name: "Build", value: 45, color: "#f97316" },
  { name: "Review", value: 20, color: "#7c3aed" },
];
const options: PieOptions<Datum> = { value: "value", keyBy: "name" };
const first: PieSliceGeometry<Datum> = pieSlices(data, options)[0];
const placement: PieLabelPlacement = "auto";
const layoutStyle: PieLayoutStyle = {
  cx: 160,
  cy: 110,
  radius: 75,
  innerRadius: 28,
  labelFont: "12px sans-serif",
};
const sliceStyle: PieSliceStyle = { fill: first.datum.color, stroke: "#fff" };
const labelStyle: PieLabelStyle = { fill: "#111827", leaderStroke: "#64748b" };
const layout: PieLayoutProps<Datum> = {
  data,
  ...options,
  placement,
  style: layoutStyle,
  label: (slice) => `${slice.datum.name} ${Math.round(slice.fraction * 100)}%`,
  children: (slice: PieLayoutSlice<Datum>) => {
    const label: PieLabelLayout | undefined = slice.label;
    const paint: PieSliceProps<Datum> = {
      slice,
      style: { ...sliceStyle, fill: slice.datum.color },
    };
    const text: PieLabelProps<Datum> = {
      slice,
      style: {
        ...labelStyle,
        fill:
          label?.status === "placed" && label.placement === "inside"
            ? "#fff"
            : "#111827",
      },
    };
    return (
      <PieSlice {...paint}>
        <PieLabel {...text} />
      </PieSlice>
    );
  },
};
const canvas = document.createElement("canvas");
canvas.width = 320;
canvas.height = 220;
document.body.append(canvas);
const app = pibbl(canvas, <PieLayout {...layout} />);
window.addEventListener("pagehide", () => app.dispose(), { once: true });

Usage notes

Section titled “Usage notes”
  • Creates its own canvas and disposes the Pibbl mount on pagehide.

Documentation version

Section titled “Documentation version”

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