PieChart

Parts of a whole: one slice per names category, sized by a values measure. The aggregation runs in the browser.

Loading…

<PieChart
  data="db.iris"
  names="species"
  values="count(*)"
  legend="bottom"
/>

Make it a donut

A non-zero innerRadius cuts out the center, leaving room for a total or a title. Move the legend to the side when the chart is wide.

Loading…

<PieChart
  data="db.iris"
  names="species"
  values="sum(petal_length)"
  innerRadius={60}
  valueFormat=".0f"
  legend="right"
/>

Props

Prop	Type	Notes
`data` / `query`	relation \| SQL	Source rows; a relation, or full SQL. Mutually exclusive.
`names`	column	One slice per distinct value.
`values`	measure \| column	Slice size, e.g. `count(*)`.
`aggregate`	`"sum"` \| `"count"` \| `"mean"`	How rows collapse per slice when `values` is a column.
`innerRadius`	`number` \| `string`	Non-zero turns the pie into a donut.
`colors`	`{ [name]: string }`	Pin specific slice colors by category name.
`valueFormat`	d3-format spec	How slice values render.
`legend`	`"top"` \| `"bottom"` \| `"left"` \| `"right"` \| `"none"`	Legend placement.

Expressions in values, query, and filters values support {{binding}} interpolation against the surrounding BindingProvider.

Installation

PieChart ships in @n6k.io/ui/components. Nothing to install. Register the namespace once in src/app/mdx-components.tsx and the tag resolves in both .mdx and page.py pages:

import * as n6k from "@n6k.io/ui/components";

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...n6k, // PieChart, and every other n6k component
    ...components,
  } as unknown as MDXComponents;
}