Variable: pieAttributes
ts
const pieAttributes: ObjectNode<{
direction: Attr<"clockwise" | "counterclockwise", {
description: "Direction in which slices follow each other. The first slice always has an edge at the starting angle (12 o'clock for `rotation: 0`).";
dflt: "counterclockwise";
editType: "calc";
values: readonly ["clockwise", "counterclockwise"];
}>;
dlabel: Attr<number, {
description: "Label step, see `label0`.";
dflt: 1;
editType: "calc";
}>;
hole: Attr<number, {
description: "Fraction of the radius cut out of the middle: a donut chart when > 0.";
dflt: 0;
editType: "calc";
max: 1;
min: 0;
}>;
hoverinfo: Attr<
| "none"
| "text"
| `text+${string}`
| "percent"
| "value"
| "all"
| "label"
| `percent+${string}`
| `value+${string}`
| `label+${string}`
| "name"
| "skip"
| `name+${string}`
| readonly (
| "none"
| "text"
| `text+${string}`
| "percent"
| "value"
| "all"
| "label"
| `percent+${string}`
| `value+${string}`
| `label+${string}`
| "name"
| "skip"
| `name+${string}`)[], {
arrayOk: true;
description: "Which fields hover labels show, in a fixed order; `'skip'` also turns hover events off for this trace. Default `'all'`.";
editType: "none";
extras: readonly ["all", "none", "skip"];
flags: readonly ["label", "text", "value", "percent", "name"];
}>;
insidetextfont: ObjectNode<{
color: Attr<string | readonly string[], {
arrayOk: true;
description: "Text color, or one per slice.";
editType: "style";
}>;
family: Attr<string, {
description: "CSS font-family list.";
editType: "plot";
noBlank: true;
strict: true;
}>;
size: Attr<
| number
| TypedArray
| readonly number[], {
arrayOk: true;
description: "Font size in CSS px, or one per slice.";
editType: "plot";
min: 1;
}>;
style: Attr<"normal" | "italic", {
description: "Font style.";
editType: "plot";
values: readonly ["normal", "italic"];
}>;
weight: Attr<number | "normal" | "bold", {
description: "Font weight: a CSS numeric weight (1–1000), `normal` or `bold`.";
editType: "plot";
extras: readonly ["normal", "bold"];
max: 1000;
min: 1;
}>;
}>;
insidetextorientation: Attr<"radial" | "horizontal" | "auto" | "tangential", {
description: "Orientation of inside labels: `horizontal`, `radial` (along the radius), `tangential` (across it), or `auto` (whichever is largest).";
dflt: "auto";
editType: "plot";
values: readonly ["horizontal", "radial", "tangential", "auto"];
}>;
label0: Attr<number, {
description: "Without `labels`: numeric labels `label0 + i·dlabel` (only used when `values` is set).";
dflt: 0;
editType: "calc";
}>;
labels: AttrSpec<DataArray, DataArray | undefined>;
marker: ObjectNode<{
colors: AttrSpec<DataArray, DataArray | undefined>;
line: ObjectNode<{
color: Attr<string | readonly string[], {
arrayOk: true;
description: "Slice outline color, or one per slice.";
dflt: "#444";
editType: "style";
}>;
width: Attr<
| number
| TypedArray
| readonly number[], {
arrayOk: true;
description: "Slice outline width in CSS px (centered on the edge), or one per slice.";
dflt: 0;
editType: "style";
min: 0;
}>;
}>;
pattern: ObjectNode<{
bgcolor: Attr<string, {
arrayOk: boolean;
description: `Pattern background. Default: the fill color with `fillmode: 'overlay'`, else transparent${string}.`;
editType: "style";
}>;
fgcolor: Attr<string, {
arrayOk: boolean;
description: `Pattern color. Default: the fill color with `fillmode: 'replace'`, else white or dark grey, whichever contrasts with `bgcolor`${string}.`;
editType: "style";
}>;
fgopacity: Attr<number, {
description: "Opacity of the pattern color. Default 0.5 with `fillmode: 'overlay'`, else 1.";
editType: "style";
max: 1;
min: 0;
}>;
fillmode: Attr<"replace" | "overlay", {
description: "`'replace'`: the pattern in the fill color on `bgcolor` (default transparent) replaces the fill; `'overlay'`: the pattern is drawn over the fill color, in its contrast color at half opacity by default.";
dflt: "replace";
editType: "style";
values: readonly ["replace", "overlay"];
}>;
shape: Attr<"" | "x" | "/" | "\" | "-" | "|" | "+" | ".", {
arrayOk: boolean;
description: `Hatch shape: diagonal (`'/'`, `'\'`, `'x'`), horizontal and vertical (`'-'`, `'|'`, `'+'`) lines or dots (`'.'`); `''` for none${string}.`;
dflt: "";
editType: "style";
values: readonly ["", "/", "\", "x", "-", "|", "+", "."];
}>;
size: Attr<number, {
arrayOk: boolean;
description: `Size of the pattern's tiles in CSS px: the spacing of its lines or dots${string}.`;
dflt: 8;
editType: "style";
min: 0;
}>;
solidity: Attr<number, {
arrayOk: boolean;
description: `Fraction of the area the pattern covers: 0 shows only the background, 1 only the pattern color${string}.`;
dflt: 0.3;
editType: "style";
max: 1;
min: 0;
}>;
}>;
}>;
outsidetextfont: ObjectNode<{
color: Attr<string | readonly string[], {
arrayOk: true;
description: "Text color, or one per slice.";
editType: "style";
}>;
family: Attr<string, {
description: "CSS font-family list.";
editType: "plot";
noBlank: true;
strict: true;
}>;
size: Attr<
| number
| TypedArray
| readonly number[], {
arrayOk: true;
description: "Font size in CSS px, or one per slice.";
editType: "plot";
min: 1;
}>;
style: Attr<"normal" | "italic", {
description: "Font style.";
editType: "plot";
values: readonly ["normal", "italic"];
}>;
weight: Attr<number | "normal" | "bold", {
description: "Font weight: a CSS numeric weight (1–1000), `normal` or `bold`.";
editType: "plot";
extras: readonly ["normal", "bold"];
max: 1000;
min: 1;
}>;
}>;
pull: Attr<
| number
| TypedArray
| readonly number[], {
arrayOk: true;
description: "Fraction of the radius slices are pulled out from the center, one value for all slices or one per slice.";
dflt: 0;
editType: "calc";
max: 1;
min: 0;
}>;
rotation: Attr<number, {
description: "Starting angle in degrees, clockwise from 12 o'clock.";
dflt: 0;
editType: "calc";
}>;
scalegroup: Attr<string, {
description: "Pies with the same non-empty scale group are sized by their totals: their areas are proportional to the sums of their values.";
dflt: "";
editType: "calc";
}>;
sort: Attr<boolean, {
description: "Order slices from largest to smallest.";
dflt: true;
editType: "calc";
}>;
text: AttrSpec<DataArray, DataArray | undefined>;
textfont: ObjectNode<{
color: Attr<string | readonly string[], {
arrayOk: true;
description: "Text color, or one per slice.";
editType: "style";
}>;
family: Attr<string, {
description: "CSS font-family list.";
editType: "plot";
noBlank: true;
strict: true;
}>;
size: Attr<
| number
| TypedArray
| readonly number[], {
arrayOk: true;
description: "Font size in CSS px, or one per slice.";
editType: "plot";
min: 1;
}>;
style: Attr<"normal" | "italic", {
description: "Font style.";
editType: "plot";
values: readonly ["normal", "italic"];
}>;
weight: Attr<number | "normal" | "bold", {
description: "Font weight: a CSS numeric weight (1–1000), `normal` or `bold`.";
editType: "plot";
extras: readonly ["normal", "bold"];
max: 1000;
min: 1;
}>;
}>;
textinfo: Attr<
| "none"
| "text"
| `text+${string}`
| "percent"
| "value"
| "label"
| `percent+${string}`
| `value+${string}`
| `label+${string}`, {
description: "What slice labels show, in a fixed order (label, text, value, percent), one per line. Default `'percent'`, or `'text+percent'` when `text` is an array. Use `texttemplate` for other layouts.";
editType: "calc";
extras: readonly ["none"];
flags: readonly ["label", "text", "value", "percent"];
}>;
textposition: Attr<
| "none"
| "auto"
| "outside"
| "inside"
| readonly ("none" | "auto" | "outside" | "inside")[], {
arrayOk: true;
description: "Where slice labels go: `inside` (shrunk to fit), `outside` (next to the slice, moved apart to avoid overlaps, with leader lines when moved), `auto` (inside when it fits unshrunk, else outside), `none`.";
dflt: "auto";
editType: "plot";
values: readonly ["inside", "outside", "auto", "none"];
}>;
texttemplate: Attr<string | readonly string[], {
arrayOk: true;
description: "Template for slice labels, overriding `textinfo`: `%{label}`, `%{value}`, `%{percent}`, `%{text}`, `%{color}`, `%{customdata}`, `%{meta}`, with optional d3 formats (`%{percent:.1%}`). Without a format, `value` and `percent` are formatted like `textinfo`.";
dflt: "";
editType: "plot";
}>;
title: ObjectNode<{
font: ObjectNode<{
color: Attr<string | readonly string[], {
arrayOk: true;
description: "Text color, or one per slice.";
editType: "style";
}>;
family: Attr<string, {
description: "CSS font-family list.";
editType: "plot";
noBlank: true;
strict: true;
}>;
size: Attr<
| number
| TypedArray
| readonly number[], {
arrayOk: true;
description: "Font size in CSS px, or one per slice.";
editType: "plot";
min: 1;
}>;
style: Attr<"normal" | "italic", {
description: "Font style.";
editType: "plot";
values: readonly ["normal", "italic"];
}>;
weight: Attr<number | "normal" | "bold", {
description: "Font weight: a CSS numeric weight (1–1000), `normal` or `bold`.";
editType: "plot";
extras: readonly ["normal", "bold"];
max: 1000;
min: 1;
}>;
}>;
position: Attr<
| "middle center"
| "top left"
| "top center"
| "top right"
| "bottom left"
| "bottom center"
| "bottom right", {
description: "Where the title goes. Default `'middle center'` (inside the hole) for donuts, else `'top center'`; `'middle center'` needs a `hole`.";
editType: "plot";
values: readonly ["top left", "top center", "top right", "middle center", "bottom left", "bottom center", "bottom right"];
}>;
text: Attr<string, {
description: "Title of the pie. Empty: no title.";
dflt: "";
editType: "plot";
}>;
}>;
values: AttrSpec<DataArray, DataArray | undefined>;
}>;Experimental
The pie schema.