Density

PieChart

PieChart shows how category values contribute to a whole. It renders a doughnut, assigns each category a chart-series color, separates slices with a 1px background-revealing gap, 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} />;
}

data and aria-label are required. PieChart cycles through chart-series colors for every pie. size controls the title size, while emphasis controls its color.

Spark

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

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

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

export default function PieChartSparkExample() {
  return (
    <View align="start" gap="md" padding={false}>
      <PieChart
        aria-label="Incident source share"
        data={incidentSources}
        spark
        style={{ width: "160px" }}
      />
    </View>
  );
}

Emphasis

Primary
Secondary
Outline
Ghost
import { PieChart, View } from "density-base-ui";
const data = [
  { label: "Direct", value: 60 },
  { label: "Search", value: 40 },
];
export default function PieChartEmphasisExample() {
  return (
    <View
      gap="xl"
      layout="grid"
      padding={false}
      style={{
        gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
        width: "100%",
      }}
    >
      <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-primary"
        height={120}
        title="Ghost"
      />
    </View>
  );
}

Size

2xs
xs
sm
md
lg
xl
2xl
3xl
import { PieChart, View } from "density-base-ui";
const data = [
  { label: "Direct", value: 60 },
  { label: "Search", value: 40 },
];
export default function PieChartSizeExample() {
  return (
    <View
      gap="xl"
      layout="grid"
      padding={false}
      style={{
        gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
        width: "100%",
      }}
    >
      <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"
      />
    </View>
  );
}

Title

Traffic sources
Visitors from the previous seven days
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"
      subtitle="Visitors from the previous seven days"
    />
  );
}

Height

120 pixels
240 pixels
import { PieChart, View } from "density-base-ui";
const data = [
  { label: "Direct", value: 60 },
  { label: "Search", value: 40 },
];
export default function PieChartHeightExample() {
  return (
    <View
      gap="xl"
      layout="grid"
      padding={false}
      style={{
        gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
        width: "100%",
      }}
    >
      <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"
      />
    </View>
  );
}

Padding

Set padding to add outer spacing around a standard chart frame without changing the plotted slices’ geometry. Spark charts ignore padding.

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

const trafficSources = [
  { label: "Organic", value: 42 },
  { label: "Referral", value: 27 },
  { label: "Direct", value: 18 },
  { label: "Paid", value: 13 },
];

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