Density

PieChart

PieChart shows how category values contribute to a whole. It renders a doughnut by default, assigns each category a chart-series color, and identifies slices through its keyboard-accessible tooltip.

import { PieChart } from "density-base-ui";

const trafficSources = [
  { label: "Direct", value: 42 },
  { label: "Search", value: 31 },
  { label: "Referral", value: 17 },
  { label: "Email", value: 10 },
];

export default function PieChartExample() {
  return <PieChart aria-label="Traffic sources" data={trafficSources} />;
}

Props

Prop Values Default
data { label: string, value: number }[] None
aria-label string None
variant doughnut, pie doughnut
spark true, false false
emphasis primary, secondary, outline, ghost secondary
size 2xs, xs, sm, md, lg, xl, 2xl, 3xl sm
title string None
height number Responsive default

data and aria-label are required. Set variant="pie" when a solid pie better fits the surrounding interface. PieChart cycles through chart-series colors for every pie. size controls the title size, while emphasis controls its color.

Variant

Doughnut
Pie
import { PieChart } from "density-base-ui";
const data = [
  { label: "Direct", value: 60 },
  { label: "Search", value: 40 },
];
export default function PieChartVariantExample() {
  return (
    <div style={styles.grid}>
      <PieChart
        aria-label="Doughnut"
        data={data}
        height={180}
        title="Doughnut"
        variant="doughnut"
      />
      <PieChart
        aria-label="Pie"
        data={data}
        height={180}
        title="Pie"
        variant="pie"
      />
    </div>
  );
}
const styles = {
  grid: {
    display: "grid",
    gap: "1rem",
    gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
    width: "100%",
  },
} as const;

Spark

Set spark for a compact 32px chart without visible labels. Spark charts still expose their data through keyboard-accessible tooltips.

import { PieChart } from "density-base-ui";
import { ExampleStack } from "../ExampleLayout";

const incidentSources = [
  { label: "Monitor", value: 46 },
  { label: "User", value: 24 },
  { label: "Deploy", value: 18 },
  { label: "Vendor", value: 12 },
];

export default function PieChartSparkExample() {
  return (
    <ExampleStack style={{ width: "100%" }}>
      <PieChart
        aria-label="Incident source share"
        data={incidentSources}
        spark
        style={{ width: "160px" }}
      />
    </ExampleStack>
  );
}

Emphasis

Primary
Secondary
Outline
Ghost
import { PieChart } from "density-base-ui";
const data = [
  { label: "Direct", value: 60 },
  { label: "Search", value: 40 },
];
export default function PieChartEmphasisExample() {
  return (
    <div style={styles.grid}>
      <PieChart
        aria-label="Primary"
        data={data}
        emphasis="primary"
        height={120}
        title="Primary"
      />
      <PieChart
        aria-label="Secondary"
        data={data}
        emphasis="secondary"
        height={120}
        title="Secondary"
      />
      <PieChart
        aria-label="Outline"
        data={data}
        emphasis="outline"
        height={120}
        title="Outline"
      />
      <PieChart
        aria-label="Ghost"
        data={data}
        emphasis="ghost"
        height={120}
        title="Ghost"
      />
    </div>
  );
}
const styles = {
  grid: {
    display: "grid",
    gap: "1rem",
    gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
    width: "100%",
  },
} as const;

Size

2xs
xs
sm
md
lg
xl
2xl
3xl
import { PieChart } from "density-base-ui";
const data = [
  { label: "Direct", value: 60 },
  { label: "Search", value: 40 },
];
export default function PieChartSizeExample() {
  return (
    <div style={styles.grid}>
      <PieChart
        aria-label="2xs"
        data={data}
        height={100}
        size="2xs"
        title="2xs"
      />
      <PieChart aria-label="xs" data={data} height={100} size="xs" title="xs" />
      <PieChart aria-label="sm" data={data} height={100} size="sm" title="sm" />
      <PieChart aria-label="md" data={data} height={100} size="md" title="md" />
      <PieChart aria-label="lg" data={data} height={100} size="lg" title="lg" />
      <PieChart aria-label="xl" data={data} height={100} size="xl" title="xl" />
      <PieChart
        aria-label="2xl"
        data={data}
        height={100}
        size="2xl"
        title="2xl"
      />
      <PieChart
        aria-label="3xl"
        data={data}
        height={100}
        size="3xl"
        title="3xl"
      />
    </div>
  );
}
const styles = {
  grid: {
    display: "grid",
    gap: "1rem",
    gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
    width: "100%",
  },
} as const;

Title

Traffic sources
import { PieChart } from "density-base-ui";
const data = [
  { label: "Direct", value: 60 },
  { label: "Search", value: 40 },
];
export default function PieChartTitleExample() {
  return (
    <PieChart
      aria-label="Traffic sources"
      data={data}
      title="Traffic sources"
    />
  );
}

Height

120 pixels
240 pixels
import { PieChart } from "density-base-ui";
const data = [
  { label: "Direct", value: 60 },
  { label: "Search", value: 40 },
];
export default function PieChartHeightExample() {
  return (
    <div style={styles.grid}>
      <PieChart
        aria-label="120 pixel chart"
        data={data}
        height={120}
        title="120 pixels"
      />
      <PieChart
        aria-label="240 pixel chart"
        data={data}
        height={240}
        title="240 pixels"
      />
    </div>
  );
}
const styles = {
  grid: {
    display: "grid",
    gap: "1rem",
    gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
    width: "100%",
  },
} as const;