Variable: colorbarAttributes
ts
const colorbarAttributes: ObjectNode<{
bgcolor: Attr<
string,
{
description: 'Background of the box.';
dflt: 'rgba(0,0,0,0)';
}
>;
bordercolor: Attr<
string,
{
description: 'Border color of the colorbar box.';
dflt: '#444';
}
>;
borderwidth: Attr<
number,
{
description: 'Border width of the box, px.';
dflt: 0;
min: 0;
}
>;
dtick: AttrSpec<unknown, unknown>;
exponentformat: Attr<
'none' | 'e' | 'E' | 'power' | 'SI' | 'B',
{
description: 'How large and small numbers are written: `none` (1000000), `e` (1e+6), `E` (1E+6), `power` (1×10⁶), `SI` (1M), `B` (like SI but 1B for 10⁹).';
dflt: 'B';
editType: readonly (
| 'calc'
| 'calcIfAutorange'
| 'crossTraceCalc'
| 'layout'
| 'ticks'
| 'plot'
| 'style'
| 'colorbars'
| 'legend'
| 'modebar'
| 'camera'
| 'none'
)[];
values: readonly ['none', 'e', 'E', 'power', 'SI', 'B'];
}
>;
len: Attr<
number,
{
description: 'Length of the colorbar along its axis, padding included (`ypad` / `xpad`).';
dflt: 1;
min: 0;
}
>;
lenmode: Attr<
'fraction' | 'pixels',
{
description: 'Unit of `len`: px, or a fraction of the plot height (`v`) / width (`h`).';
dflt: 'fraction';
values: readonly ['fraction', 'pixels'];
}
>;
minexponent: Attr<
number,
{
description: 'Smallest decimal exponent written in exponent form (`SI`/`B` and exponent formats); smaller magnitudes are written out in full.';
dflt: 3;
editType: readonly (
| 'calc'
| 'calcIfAutorange'
| 'crossTraceCalc'
| 'layout'
| 'ticks'
| 'plot'
| 'style'
| 'colorbars'
| 'legend'
| 'modebar'
| 'camera'
| 'none'
)[];
min: 0;
}
>;
nticks: Attr<
number,
{
description: 'Maximum number of ticks for `tickmode: auto` (the actual number may be lower so steps stay round). 0 picks it from the axis length.';
dflt: 0;
editType: 'ticks';
min: 0;
}
>;
orientation: Attr<
'v' | 'h',
{
description: 'Vertical bar (`v`, beside the plot) or horizontal bar (`h`, above or below).';
dflt: 'v';
values: readonly ['h', 'v'];
}
>;
outlinecolor: Attr<
string,
{
description: 'Color of the outline around the bar.';
dflt: '#444';
}
>;
outlinewidth: Attr<
number,
{
description: 'Outline width, px.';
dflt: 1;
min: 0;
}
>;
separatethousands: Attr<
boolean,
{
description: 'Always separate thousands (1,000). By default only numbers with 5 or more integer digits are separated.';
dflt: false;
editType: readonly (
| 'calc'
| 'calcIfAutorange'
| 'crossTraceCalc'
| 'layout'
| 'ticks'
| 'plot'
| 'style'
| 'colorbars'
| 'legend'
| 'modebar'
| 'camera'
| 'none'
)[];
}
>;
showexponent: Attr<
'none' | 'all' | 'first' | 'last',
{
description: 'Which tick labels show the exponent.';
dflt: 'all';
editType: readonly (
| 'calc'
| 'calcIfAutorange'
| 'crossTraceCalc'
| 'layout'
| 'ticks'
| 'plot'
| 'style'
| 'colorbars'
| 'legend'
| 'modebar'
| 'camera'
| 'none'
)[];
values: readonly ['all', 'first', 'last', 'none'];
}
>;
showticklabels: Attr<
boolean,
{
description: 'Show tick labels.';
dflt: true;
editType: readonly (
| 'calc'
| 'calcIfAutorange'
| 'crossTraceCalc'
| 'layout'
| 'ticks'
| 'plot'
| 'style'
| 'colorbars'
| 'legend'
| 'modebar'
| 'camera'
| 'none'
)[];
}
>;
showtickprefix: Attr<
'none' | 'all' | 'first' | 'last',
{
description: 'Which tick labels get `tickprefix`.';
dflt: 'all';
editType: readonly (
| 'calc'
| 'calcIfAutorange'
| 'crossTraceCalc'
| 'layout'
| 'ticks'
| 'plot'
| 'style'
| 'colorbars'
| 'legend'
| 'modebar'
| 'camera'
| 'none'
)[];
values: readonly ['all', 'first', 'last', 'none'];
}
>;
showticksuffix: Attr<
'none' | 'all' | 'first' | 'last',
{
description: 'Which tick labels get `ticksuffix`.';
dflt: 'all';
editType: readonly (
| 'calc'
| 'calcIfAutorange'
| 'crossTraceCalc'
| 'layout'
| 'ticks'
| 'plot'
| 'style'
| 'colorbars'
| 'legend'
| 'modebar'
| 'camera'
| 'none'
)[];
values: readonly ['all', 'first', 'last', 'none'];
}
>;
thickness: Attr<
number,
{
description: 'Thickness of the color bar.';
dflt: 30;
min: 0;
}
>;
thicknessmode: Attr<
'fraction' | 'pixels',
{
description: 'Unit of `thickness`: px, or a fraction of the plot width (`v`) / height (`h`).';
dflt: 'pixels';
values: readonly ['fraction', 'pixels'];
}
>;
tick0: AttrSpec<unknown, unknown>;
tickangle: Attr<
number | 'auto',
{
description: 'Tick-label rotation in degrees. `auto` rotates x-axis labels by the first `autotickangles` entry that avoids overlap.';
dflt: 'auto';
editType: readonly (
| 'calc'
| 'calcIfAutorange'
| 'crossTraceCalc'
| 'layout'
| 'ticks'
| 'plot'
| 'style'
| 'colorbars'
| 'legend'
| 'modebar'
| 'camera'
| 'none'
)[];
extras: readonly ['auto'];
}
>;
tickcolor: Attr<
string,
{
description: 'Tick color. Defaults to `color`.';
editType: 'ticks';
}
>;
tickfont: ObjectNode<{
color: Attr<
string,
{
description: 'Text color.';
editType: 'style';
}
>;
family: Attr<
string,
{
description: 'CSS font-family list. The renderer uses the first family it can load and falls back through the list.';
noBlank: true;
strict: true;
}
>;
lineposition: Attr<
| 'none'
| 'under'
| 'over'
| 'through'
| `under+${string}`
| `over+${string}`
| `through+${string}`,
{
description: 'Text decoration: `under`, `over` and/or `through` joined with `+` (e.g. `under+over`), or `none`.';
extras: readonly ['none'];
flags: readonly ['under', 'over', 'through'];
}
>;
shadow: Attr<
string,
{
description: 'CSS `text-shadow` behind the text (`2px 2px 3px black`; only the first shadow is drawn), `none`, or `auto` for a thin halo in the contrast color of the text.';
}
>;
size: Attr<
number,
{
description: 'Font size in CSS pixels.';
min: 1;
}
>;
style: Attr<
'normal' | 'italic',
{
description: 'Font style.';
values: readonly ['normal', 'italic'];
}
>;
textcase: Attr<
'normal' | 'word caps' | 'upper' | 'lower',
{
description: 'Letter case transform: `upper`, `lower`, `word caps` (first letter of each word), or `normal`.';
values: readonly ['normal', 'word caps', 'upper', 'lower'];
}
>;
variant: Attr<
'normal' | 'small-caps' | 'all-small-caps' | 'all-petite-caps' | 'petite-caps' | 'unicase',
{
description: 'Capitals variant (CSS `font-variant-caps`). The SDF text renderer approximates small and petite caps with uppercase letters at a reduced size.';
values: readonly [
'normal',
'small-caps',
'all-small-caps',
'all-petite-caps',
'petite-caps',
'unicase',
];
}
>;
weight: Attr<
number | 'normal' | 'bold',
{
description: 'Font weight: a CSS numeric weight (1–1000), `normal` or `bold`.';
extras: readonly ['normal', 'bold'];
max: 1000;
min: 1;
}
>;
}>;
tickformat: Attr<
string,
{
description: 'Tick-label format: a d3-format specifier for numbers (`.2f`, `~s`, `$,`) or a d3-time-format specifier for dates (`%b %Y`), plus `%{n}f` for `n` digits of fractional seconds and `%h` for the half year. Empty picks a format automatically.';
dflt: '';
editType: readonly (
| 'calc'
| 'calcIfAutorange'
| 'crossTraceCalc'
| 'layout'
| 'ticks'
| 'plot'
| 'style'
| 'colorbars'
| 'legend'
| 'modebar'
| 'camera'
| 'none'
)[];
}
>;
ticklabeloverflow: Attr<
'allow' | 'hide past div' | 'hide past domain',
{
description: 'Hide labels past the figure or past the bar. Defaults to `hide past domain` for inside labels, else `hide past div`.';
values: readonly ['allow', 'hide past div', 'hide past domain'];
}
>;
ticklabelposition: Attr<
| 'outside'
| 'inside'
| 'outside top'
| 'inside top'
| 'outside left'
| 'inside left'
| 'outside right'
| 'inside right'
| 'outside bottom'
| 'inside bottom',
{
description: 'Tick labels outside the bar (away from it) or inside (over it); `top`/`bottom` (`v`) or `left`/`right` (`h`) move them beside their tick.';
dflt: 'outside';
values: readonly [
'outside',
'inside',
'outside top',
'inside top',
'outside bottom',
'inside bottom',
'outside left',
'inside left',
'outside right',
'inside right',
];
}
>;
ticklabelstep: Attr<
number,
{
description: 'Label every n-th tick only (`tickmode` `auto` and `linear`).';
dflt: 1;
editType: 'ticks';
min: 1;
}
>;
ticklen: Attr<
number,
{
description: 'Tick length in px.';
dflt: 5;
editType: readonly (
| 'calc'
| 'calcIfAutorange'
| 'crossTraceCalc'
| 'layout'
| 'ticks'
| 'plot'
| 'style'
| 'colorbars'
| 'legend'
| 'modebar'
| 'camera'
| 'none'
)[];
min: 0;
}
>;
tickmode: Attr<
'linear' | 'auto' | 'array' | 'sync',
{
description: '`auto` picks up to `nticks` round ticks; `linear` places ticks from `tick0` every `dtick`; `array` uses `tickvals`/`ticktext`; `sync` aligns with the overlaid axis (reserved; behaves as `auto`). Defaults to `array` when `tickvals` is set, `linear` when `dtick` is set, else `auto`.';
editType: 'ticks';
values: readonly ['auto', 'linear', 'array', 'sync'];
}
>;
tickprefix: Attr<
string,
{
description: 'Text before each tick label.';
dflt: '';
editType: readonly (
| 'calc'
| 'calcIfAutorange'
| 'crossTraceCalc'
| 'layout'
| 'ticks'
| 'plot'
| 'style'
| 'colorbars'
| 'legend'
| 'modebar'
| 'camera'
| 'none'
)[];
}
>;
ticks: Attr<
'' | 'outside' | 'inside',
{
description: "Draw tick marks outside or inside the plot area, or not at all (`''`).";
dflt: '';
editType: EditType;
values: readonly ['outside', 'inside', ''];
}
>;
ticksuffix: Attr<
string,
{
description: 'Text after each tick label.';
dflt: '';
editType: readonly (
| 'calc'
| 'calcIfAutorange'
| 'crossTraceCalc'
| 'layout'
| 'ticks'
| 'plot'
| 'style'
| 'colorbars'
| 'legend'
| 'modebar'
| 'camera'
| 'none'
)[];
}
>;
ticktext: AttrSpec<DataArray, DataArray | undefined>;
tickvals: AttrSpec<DataArray, DataArray | undefined>;
tickwidth: Attr<
number,
{
description: 'Tick width in px.';
dflt: 1;
editType: 'ticks';
min: 0;
}
>;
title: ObjectNode<{
font: ObjectNode<{
color: Attr<
string,
{
description: 'Text color.';
editType: 'style';
}
>;
family: Attr<
string,
{
description: 'CSS font-family list. The renderer uses the first family it can load and falls back through the list.';
noBlank: true;
strict: true;
}
>;
lineposition: Attr<
| 'none'
| 'under'
| 'over'
| 'through'
| `under+${string}`
| `over+${string}`
| `through+${string}`,
{
description: 'Text decoration: `under`, `over` and/or `through` joined with `+` (e.g. `under+over`), or `none`.';
extras: readonly ['none'];
flags: readonly ['under', 'over', 'through'];
}
>;
shadow: Attr<
string,
{
description: 'CSS `text-shadow` behind the text (`2px 2px 3px black`; only the first shadow is drawn), `none`, or `auto` for a thin halo in the contrast color of the text.';
}
>;
size: Attr<
number,
{
description: 'Font size in CSS pixels.';
min: 1;
}
>;
style: Attr<
'normal' | 'italic',
{
description: 'Font style.';
values: readonly ['normal', 'italic'];
}
>;
textcase: Attr<
'normal' | 'word caps' | 'upper' | 'lower',
{
description: 'Letter case transform: `upper`, `lower`, `word caps` (first letter of each word), or `normal`.';
values: readonly ['normal', 'word caps', 'upper', 'lower'];
}
>;
variant: Attr<
'normal' | 'small-caps' | 'all-small-caps' | 'all-petite-caps' | 'petite-caps' | 'unicase',
{
description: 'Capitals variant (CSS `font-variant-caps`). The SDF text renderer approximates small and petite caps with uppercase letters at a reduced size.';
values: readonly [
'normal',
'small-caps',
'all-small-caps',
'all-petite-caps',
'petite-caps',
'unicase',
];
}
>;
weight: Attr<
number | 'normal' | 'bold',
{
description: 'Font weight: a CSS numeric weight (1–1000), `normal` or `bold`.';
extras: readonly ['normal', 'bold'];
max: 1000;
min: 1;
}
>;
}>;
side: Attr<
'right' | 'top' | 'bottom',
{
description: 'Where the title goes relative to the bar. Defaults to `top` (`v`) or `right` (`h`).';
values: readonly ['right', 'top', 'bottom'];
}
>;
text: Attr<
string,
{
description: 'Colorbar title.';
dflt: '';
}
>;
}>;
x: Attr<
number,
{
description: 'Horizontal position (`xref` fraction). Defaults to 1.02 (`v`, paper), 1 (`v`, container) or 0.5 (`h`).';
}
>;
xanchor: Attr<
'left' | 'center' | 'right',
{
description: 'Which side of the colorbar sits at `x`. Defaults to `left` (`v`, paper), `right` (`v`, container) or `center` (`h`).';
values: readonly ['left', 'center', 'right'];
}
>;
xpad: Attr<
number,
{
description: 'Horizontal padding, px.';
dflt: 10;
min: 0;
}
>;
xref: Attr<
'container' | 'paper',
{
description: 'Reference of `x`: the plot area (`paper`) or the whole figure.';
dflt: 'paper';
values: readonly ['container', 'paper'];
}
>;
y: Attr<
number,
{
description: 'Vertical position (`yref` fraction). Defaults to 0.5 (`v`), 1.02 (`h`, paper) or 1 (`h`, container).';
}
>;
yanchor: Attr<
'middle' | 'top' | 'bottom',
{
description: 'Which side of the colorbar sits at `y`. Defaults to `middle` (`v`), `bottom` (`h`, paper) or `top` (`h`, container).';
values: readonly ['top', 'middle', 'bottom'];
}
>;
ypad: Attr<
number,
{
description: 'Vertical padding, px.';
dflt: 10;
min: 0;
}
>;
yref: Attr<
'container' | 'paper',
{
description: 'Reference of `y`: the plot area (`paper`) or the whole figure.';
dflt: 'paper';
values: readonly ['container', 'paper'];
}
>;
}>;Experimental
The colorbar container of a colorscaled container with showscale (marker.colorbar, layout.coloraxisN.colorbar), following Plotly's colorbar attributes: size and placement, outline, border and background, the axis tick API (the colorbar is a linear axis over [cmin, cmax]) and a title.