Variable: indicatorAttributes
ts
const indicatorAttributes: ObjectNode<{
align: Attr<"left" | "right" | "center", {
description: "Horizontal alignment of the number and delta in the domain. No effect with an angular gauge, where they are always centered. Default `center`.";
editType: "plot";
values: readonly ["left", "center", "right"];
}>;
delta: ObjectNode<{
decreasing: ObjectNode<{
color: Attr<string, {
description: "Color of a negative delta.";
dflt: "#FF4136";
editType: "plot";
}>;
symbol: Attr<string, {
description: "Symbol before a negative delta.";
dflt: "▼";
editType: "plot";
}>;
}>;
font: ObjectNode<{
color: Attr<string, {
description: "Text color.";
editType: "plot";
}>;
family: Attr<string, {
description: "CSS font-family list.";
editType: "plot";
noBlank: true;
strict: true;
}>;
size: Attr<number, {
description: "Font size in CSS px.";
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;
}>;
}>;
increasing: ObjectNode<{
color: Attr<string, {
description: "Color of a positive (or zero) delta.";
dflt: "#3D9970";
editType: "plot";
}>;
symbol: Attr<string, {
description: "Symbol before a positive delta.";
dflt: "▲";
editType: "plot";
}>;
}>;
position: Attr<"left" | "right" | "top" | "bottom", {
description: "Where the delta goes relative to the number.";
dflt: "bottom";
editType: "plot";
values: readonly ["top", "bottom", "left", "right"];
}>;
prefix: Attr<string, {
description: "Text between the symbol and the delta.";
dflt: "";
editType: "plot";
}>;
reference: Attr<number, {
animatable: true;
description: "The reference the delta is computed from. Default: `value`.";
editType: "calc";
}>;
relative: Attr<boolean, {
description: "Show the relative change `(value − reference) / reference`.";
dflt: false;
editType: "plot";
}>;
suffix: Attr<string, {
description: "Text after the delta.";
dflt: "";
editType: "plot";
}>;
valueformat: Attr<string, {
description: "d3-format specifier of the delta. Default `'2%'` (a percentage, trailing zeros trimmed) when `relative`, else rounded like the number.";
editType: "plot";
}>;
}>;
gauge: ObjectNode<{
axis: ObjectNode<{
range: AttrSpec<[unknown, unknown], [unknown, unknown] | undefined>;
tickcolor: Attr<string, {
description: "Tick color.";
dflt: "#444";
editType: "plot";
}>;
tickfont: ObjectNode<{
color: Attr<string, {
description: "Text color.";
editType: "plot";
}>;
family: Attr<string, {
description: "CSS font-family list.";
editType: "plot";
noBlank: true;
strict: true;
}>;
size: Attr<number, {
description: "Font size in CSS px.";
editType: "plot";
min: 1;
}>;
style: Attr<"normal" | "italic", {
description: "Font style.";
editType: "plot";
values: readonly [..., ...];
}>;
weight: Attr<number | "normal" | "bold", {
description: "Font weight: a CSS numeric weight (1–1000), `normal` or `bold`.";
editType: "plot";
extras: readonly [..., ...];
max: 1000;
min: 1;
}>;
}>;
tickmode: Attr<"auto" | "linear" | "array", {
description: "`auto` picks up to `nticks` round ticks; `linear` places ticks from `tick0` every `dtick`; `array` uses `tickvals`/`ticktext`. Defaults to `array` when `tickvals` is set, `linear` when `dtick` is set, else `auto`.";
editType: "plot";
values: readonly ["auto", "linear", "array"];
}>;
ticks: Attr<"" | "inside" | "outside", {
description: "Draw tick marks outside or inside the gauge, or not at all (`''`).";
dflt: "outside";
editType: "plot";
values: readonly ["outside", "inside", ""];
}>;
visible: Attr<boolean, {
description: "Show the axis ticks and tick labels.";
dflt: true;
editType: "plot";
}>;
}>;
bar: ObjectNode<{
color: Attr<string, {
description: `Fill color of the ${string}.`;
dflt?: string;
editType: "plot";
}>;
line: ObjectNode<{
color: Attr<string, {
description: `Outline color of the ${(...)}.`;
dflt: "#444";
editType: "plot";
}>;
width: Attr<number, {
description: `Outline width of the ${(...)} in CSS px (centered on its edge).`;
dflt: 0;
editType: "plot";
min: 0;
}>;
}>;
thickness: Attr<number, {
description: `Thickness of the ${string} as a fraction of the gauge's thickness, centered on it.`;
dflt: number;
editType: "plot";
max: 1;
min: 0;
}>;
}>;
bgcolor: Attr<string, {
description: "Gauge background color. Default: `layout.paper_bgcolor`.";
editType: "plot";
}>;
bordercolor: Attr<string, {
description: "Color of the gauge outline.";
dflt: "#444";
editType: "plot";
}>;
borderwidth: Attr<number, {
description: "Width of the gauge outline in CSS px.";
dflt: 1;
editType: "plot";
min: 0;
}>;
shape: Attr<"angular" | "bullet", {
description: "Gauge shape: `angular` (a half ring with the number in its middle) or `bullet` (a horizontal bar, the number to its right).";
dflt: "angular";
editType: "plot";
values: readonly ["angular", "bullet"];
}>;
steps: ItemsNode<object & TemplatedItemChildren>;
threshold: ObjectNode<{
line: ObjectNode<{
color: Attr<string, {
description: "Color of the threshold line.";
dflt: "#444";
editType: "plot";
}>;
width: Attr<number, {
description: "Width of the threshold line in CSS px.";
dflt: 1;
editType: "plot";
min: 0;
}>;
}>;
thickness: Attr<number, {
description: "Length of the threshold line as a fraction of the gauge's thickness, centered on it.";
dflt: 0.85;
editType: "plot";
max: 1;
min: 0;
}>;
value: Attr<number, {
description: "Axis value marked by a line across the gauge. Unset: no line.";
editType: "calc";
}>;
}>;
}>;
mode: Attr<
| "number"
| "delta"
| "gauge"
| `delta+${string}`
| `number+${string}`
| `gauge+${string}`, {
description: "What shows the value: `number` (the value as text), `delta` (its difference to `delta.reference` as text) and / or `gauge` (the value on an angular or bullet gauge).";
dflt: "number";
editType: "calc";
flags: readonly ["number", "delta", "gauge"];
}>;
number: ObjectNode<{
font: ObjectNode<{
color: Attr<string, {
description: "Text color.";
editType: "plot";
}>;
family: Attr<string, {
description: "CSS font-family list.";
editType: "plot";
noBlank: true;
strict: true;
}>;
size: Attr<number, {
description: "Font size in CSS px.";
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;
}>;
}>;
prefix: Attr<string, {
description: "Text before the number.";
dflt: "";
editType: "plot";
}>;
suffix: Attr<string, {
description: "Text after the number.";
dflt: "";
editType: "plot";
}>;
valueformat: Attr<string, {
description: "d3-format specifier of the number. Default: rounded like a tick label of an axis from 0 to 1.5 times the value (or the gauge axis).";
dflt: "";
editType: "plot";
}>;
}>;
title: ObjectNode<{
align: Attr<"left" | "right" | "center", {
description: "Horizontal alignment of the title in the domain. Default `center`; a bullet gauge puts its title to the left of the domain, right-aligned.";
editType: "plot";
values: readonly ["left", "center", "right"];
}>;
font: ObjectNode<{
color: Attr<string, {
description: "Text color.";
editType: "plot";
}>;
family: Attr<string, {
description: "CSS font-family list.";
editType: "plot";
noBlank: true;
strict: true;
}>;
size: Attr<number, {
description: "Font size in CSS px.";
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;
}>;
}>;
text: Attr<string, {
description: "Title of the indicator (Plotly pseudo-HTML allowed).";
editType: "plot";
}>;
}>;
value: Attr<number, {
animatable: true;
description: "The value to show. Transitions (`layout.transition`, `animate`) count the number up and move the gauge bar.";
editType: "calc";
}>;
}>;Experimental
The indicator schema.