Theme Parameters

Version 14.3.0

Theme parameters set styles across the whole chart in one place, and most inherit their default from a few foundation parameters. Set them with params in a theme, or explore their effect in the Theme Builder.

Foundations

See Themes for more information.

backgroundColor AgCssColorOrRef: Background colour of the chart. Most text, borders and backgrounds are defined as a blend between the background and foreground colours. A colour string, or a theme-colour reference object.
foregroundColor AgCssColorOrRef: Default colour for neutral UI elements. Most text, borders and backgrounds are defined as a blend between the background and foreground colours. A colour string, or a theme-colour reference object.
accentColor AgCssColorOrRef: The 'brand colour' for the chart, used wherever a non-neutral colour is required. Selections, focus outlines and checkboxes use the accent colour by default. A colour string, or a theme-colour reference object.
fontFamily FontFamilyFull: Font family used for all text. A single family name, or an array of names used as fallbacks.
fontSize FontSize: Default font size used for all text. Titles and some other text are scaled to this font size.
fontWeight FontWeight: Default font weight used for all text.

Colours

See Colours for more information.

chartBackgroundColor AgCssColorOrRef default: backgroundColor: Colour painted behind the chart. Follows backgroundColor, which is also blended into text, borders and other backgrounds - so change that one to shift the whole theme, and this one to repaint the chart alone. A colour string, or a theme-colour reference object.
chromeBackgroundColor AgCssColorOrRef default: foregroundColor + backgroundColor: Background colour of tooltips, menus, dialogs, toolbars and buttons. A colour string, or a theme-colour reference object.
subtleTextColor AgCssColorOrRef default: foregroundColor + backgroundColor: Colour of text that should stand out less than the default. A colour string, or a theme-colour reference object.
textColor AgCssColorOrRef default: foregroundColor: Default colour for all text. A colour string, or a theme-colour reference object.

Spacing & Sizing

chartPadding PixelSize: The outer chart padding.
lineHeight Ratio: Default line height for all text, as a ratio of each text element's font size, e.g. `1.5`. When unset, text uses the natural line height of its font.

Borders

See Themes for more information.

borderColor AgCssColorOrRef default: foregroundColor + backgroundColor: Default colour for borders. A colour string, or a theme-colour reference object.
borderRadius PixelSize: Default corner radius for many UI elements such as menus and dialogs.
borderWidth PixelSize: Default width for borders.

Titles

titleColor AgCssColorOrRef default: textColor: Colour of the chart title text. A colour string, or a theme-colour reference object.
titleFontFamily FontFamilyFull default: fontFamily: Font family of the chart title. A single family name, or an array of names used as fallbacks.
titleFontSize FontSize: Font size of the chart title. Follows fontSize, keeping the same proportion to it.
titleFontWeight FontWeight default: fontWeight: Font weight of the chart title.
titleLineHeight Ratio default: lineHeight: Line height of the chart title, as a ratio of its font size.
subtitleColor AgCssColorOrRef default: subtleTextColor: Colour of the chart subtitle text. A colour string, or a theme-colour reference object.
subtitleFontFamily FontFamilyFull default: fontFamily: Font family of the chart subtitle. A single family name, or an array of names used as fallbacks.
subtitleFontSize FontSize: Font size of the chart subtitle. Follows fontSize, keeping the same proportion to it.
subtitleFontWeight FontWeight default: fontWeight: Font weight of the chart subtitle.
subtitleLineHeight Ratio default: lineHeight: Line height of the chart subtitle, as a ratio of its font size.
footnoteColor AgCssColorOrRef default: subtleTextColor: Colour of the chart footnote text. A colour string, or a theme-colour reference object.
footnoteFontFamily FontFamilyFull default: fontFamily: Font family of the chart footnote. A single family name, or an array of names used as fallbacks.
footnoteFontSize FontSize: Font size of the chart footnote. Follows fontSize, keeping the same proportion to it.
footnoteFontWeight FontWeight default: fontWeight: Font weight of the chart footnote.
footnoteLineHeight Ratio default: lineHeight: Line height of the chart footnote, as a ratio of its font size.

Axes

See Axis Configuration Axis Labels Axis Grid Lines & Band Shading for more information.

axisLabelColor AgCssColorOrRef default: textColor: Colour of axis tick labels. A colour string, or a theme-colour reference object.
axisLabelFontFamily FontFamilyFull default: fontFamily: Font family of axis tick labels. A single family name, or an array of names used as fallbacks.
axisLabelFontSize FontSize default: fontSize: Font size of axis tick labels.
axisLabelFontWeight FontWeight default: fontWeight: Font weight of axis tick labels.
axisLabelLineHeight Ratio default: lineHeight: Line height of axis tick labels, as a ratio of their font size.
axisLineColor AgCssColorOrRef default: borderColor: Default colour for axis lines and ticks. A colour string, or a theme-colour reference object.
axisLineWidth PixelSize: Default width for axis lines. Does not apply to ticks.
axisTitleColor AgCssColorOrRef default: textColor: Colour of axis titles. A colour string, or a theme-colour reference object.
axisTitleFontFamily FontFamilyFull default: fontFamily: Font family of axis titles. A single family name, or an array of names used as fallbacks.
axisTitleFontSize FontSize: Font size of axis titles. Follows fontSize, keeping the same proportion to it.
axisTitleFontWeight FontWeight default: fontWeight: Font weight of axis titles.
axisTitleLineHeight Ratio default: lineHeight: Line height of axis titles, as a ratio of their font size.
bandHighlightColor AgCssColorOrRef default: foregroundColor + backgroundColor: Colour of the band highlight. A colour string, or a theme-colour reference object.
gridLineWidth PixelSize: Default width for grid lines.
groupedCategoryLineColor AgCssColorOrRef default: foregroundColor + backgroundColor: Default colour for grouped-category separation lines. A colour string, or a theme-colour reference object.
gridLineColor AgCssColorOrRef default: axisLineColor + backgroundColor: Default colour for grid lines. A colour string, or a theme-colour reference object.

Crosshairs

See Crosshairs and Band Highlight for more information.

crosshairLabelBackgroundColor AgCssColorOrRef default: foregroundColor: Background colour of crosshair labels. A colour string, or a theme-colour reference object.
crosshairLabelTextColor AgCssColorOrRef default: backgroundColor: Colour for text in crosshair labels. A colour string, or a theme-colour reference object.

Legend

See Legend for more information.

legendBorder boolean | AgBorderThemeParam: Border around the legend and the gradient legend. `true` for the default border, `false` to disable, or an object to customise it.
legendBorderRadius PixelSize default: borderRadius: Corner radius of the legend and the gradient legend.
legendItemHorizontalPadding PixelSize: Horizontal padding around each legend item. Applies to the legend only, not the gradient legend.
legendItemVerticalPadding PixelSize: Vertical padding around each legend item. Applies to the legend only, not the gradient legend.
legendLabelColor AgCssColorOrRef default: textColor: Colour of the legend item labels, the legend pagination label and the gradient legend scale labels. A colour string, or a theme-colour reference object.
legendLabelFontFamily FontFamilyFull default: fontFamily: Font family of the legend item labels, the legend pagination label and the gradient legend scale labels. A single family name, or an array of names used as fallbacks.
legendLabelFontSize FontSize default: fontSize: Font size of the legend item labels, the legend pagination label and the gradient legend scale labels.
legendLabelFontWeight FontWeight default: fontWeight: Font weight of the legend item labels and the gradient legend scale labels.
legendLabelLineHeight Ratio default: lineHeight: Line height of the legend item labels, the legend pagination label and the gradient legend scale labels, as a ratio of their font size.
legendMarkerSize PixelSize: Size of the legend item markers. Applies to the legend only, not the gradient legend.
legendPadding PixelSize: Padding inside the legend and the gradient legend. Applied only when the legend has a border or a `fill` set in its options.

Series Labels

See Series Labels for more information.

seriesLabelBorder boolean | AgBorderThemeParam: Border around series labels. A border otherwise shows only where a series enables `label.border`. `true` for the default border, `false` to disable, or an object to customise it.
seriesLabelBorderRadius PixelSize default: borderRadius: Corner radius of series label backgrounds and borders.
seriesLabelFontFamily FontFamilyFull default: fontFamily: Font family used for series labels. A single family name, or an array of names used as fallbacks.
seriesLabelFontSize FontSize default: fontSize: Font size used for series labels. Secondary series labels scale relative to it.
seriesLabelFontWeight FontWeight default: fontWeight: Font weight used for series labels. Treemap secondary labels and map-shape labels keep their own default weights (normal and bold) unless this differs from `fontWeight`. To change them when the two are equal, set `fontWeight` on the series label directly.
seriesLabelInsideBackgroundColor AgCssColorOrRef: Background colour of series labels placed inside series shapes, such as bar labels with an `inside-*` placement and pie sector labels. A fully transparent colour, such as `'transparent'`, draws no background box; any other colour boxes the label, which adds padding and can hide labels that no longer fit. A colour string, or a theme-colour reference object.
seriesLabelInsideTextColor AgCssColorOrRef default: chartBackgroundColor: Colour for text of series labels placed inside series shapes, such as bar labels with an `inside-*` placement and pie sector labels. Range-area inside labels use `textColor` instead. A colour string, or a theme-colour reference object.
seriesLabelLineHeight Ratio default: lineHeight: Line height of series labels, as a ratio of their font size.
seriesLabelOutsideBackgroundColor AgCssColorOrRef: Background colour of series labels placed outside series shapes, such as bar labels with an `outside-*` placement and pie callout labels. A fully transparent colour, such as `'transparent'`, draws no background box; any other colour boxes the label, which adds padding and can hide labels that no longer fit. A colour string, or a theme-colour reference object.
seriesLabelOutsideTextColor AgCssColorOrRef default: textColor: Colour for text of series labels placed outside series shapes, such as bar labels with an `outside-*` placement and pie callout labels. A colour string, or a theme-colour reference object.

Buttons

buttonActiveBackgroundColor AgCssColorOrRef default: backgroundColor + accentColor: Background colour of buttons in the active (toggled or selected) state, such as a toggled toolbar button or a selected menu item. A colour string, or a theme-colour reference object.
buttonActiveBorder boolean | AgBorderThemeParam default: color: accentColor: Border of buttons in the active (toggled or selected) state. `true` to use `buttonBorder`, `false` for no visible border, or an object to customise it. Any colour or width left unset in the object follows `buttonBorder`.
buttonActiveTextColor AgCssColorOrRef default: accentColor: Text colour of buttons in the active (toggled or selected) state. A colour string, or a theme-colour reference object.
buttonBackgroundColor AgCssColorOrRef default: chromeBackgroundColor: Background colour of standard action buttons. A colour string, or a theme-colour reference object.
buttonBorder boolean | AgBorderThemeParam default: color: borderColor, width: borderWidth: Border around standard action buttons. `true` for the default border, `false` to disable, or an object to customise it.
buttonBorderRadius PixelSize default: borderRadius: Corner radius for buttons.
buttonFontWeight FontWeight: Font weight of standard action buttons.
buttonHoverBackgroundColor AgCssColorOrRef default: backgroundColor + accentColor: Background colour of buttons when hovered. A colour string, or a theme-colour reference object.
buttonTextColor AgCssColorOrRef default: chromeTextColor: Text colour of standard action buttons. A colour string, or a theme-colour reference object.
buttonDisabledBackgroundColor AgCssColorOrRef default: buttonBackgroundColor + foregroundColor: Background colour of disabled buttons. A colour string, or a theme-colour reference object.
buttonDisabledBorder boolean | AgBorderThemeParam default: buttonBorder: Border of disabled buttons. `true` to use `buttonBorder`, `false` for no visible border, or an object to customise it. Any colour or width left unset in the object follows `buttonBorder`.
buttonDisabledTextColor AgCssColorOrRef default: chromeBackgroundColor + buttonTextColor: Text colour of disabled buttons. A colour string, or a theme-colour reference object.
buttonHoverBorder boolean | AgBorderThemeParam default: buttonBorder: Border of buttons when hovered. `true` to use `buttonBorder`, `false` for no visible border, or an object to customise it. Any colour or width left unset in the object follows `buttonBorder`.
buttonHoverTextColor AgCssColorOrRef default: buttonTextColor: Text colour of buttons when hovered. A colour string, or a theme-colour reference object.

Inputs

focusShadow CssShadow: Shadow around UI controls that have focus e.g. text inputs and buttons. The value must be a valid CSS box-shadow.
inputBackgroundColor AgCssColorOrRef default: backgroundColor: Background colour for text inputs. A colour string, or a theme-colour reference object.
inputBorder boolean | AgBorderThemeParam default: color: borderColor, width: borderWidth: Border around text inputs. `true` for the default border, `false` to disable, or an object to customise it.
inputBorderRadius PixelSize default: borderRadius: Corner radius for inputs.
inputTextColor AgCssColorOrRef default: textColor: Colour of text within text inputs. A colour string, or a theme-colour reference object.
inputPlaceholderTextColor AgCssColorOrRef default: inputTextColor + inputBackgroundColor: Colour of placeholder text in text inputs. A colour string, or a theme-colour reference object.

Menus & Popups

See Context Menu for more information.

menuBackgroundColor AgCssColorOrRef default: chromeBackgroundColor: Background colour for menus, e.g. right-click context menus. A colour string, or a theme-colour reference object.
menuBorder boolean | AgBorderThemeParam default: color: borderColor, width: borderWidth: Border around menus. `true` for the default border, `false` to disable, or an object to customise it.
menuBorderRadius PixelSize default: borderRadius: Corner radius for menus.
menuSeparatorColor AgCssColorOrRef default: borderColor: Colour of the separator lines between groups of items in menus, e.g. right-click context menus. A colour string, or a theme-colour reference object.
menuTextColor AgCssColorOrRef default: chromeTextColor: Text colour for menus. A colour string, or a theme-colour reference object.
popupShadow CssShadow: Default shadow for elements that float above the chart and are intended to appear separated from it, e.g. dialogs, floating toolbars and context menus.
cardShadow CssShadow default: popupShadow: Shadow for elements that float above the chart and are intended to appear elevated but still attached, e.g. the dropdown menus of the toolbars and the colour picker. Defaults to `popupShadow`. The value must be a valid CSS box-shadow.

Panels & Dialogs

panelBackgroundColor AgCssColorOrRef default: chromeBackgroundColor: Background colour for panels and dialogs. A colour string, or a theme-colour reference object.
panelSubtleTextColor AgCssColorOrRef default: chromeSubtleTextColor: Colour of text that should stand out less in panels and dialogs. A colour string, or a theme-colour reference object.

Drag & Drop

dragHandleColor AgCssColorOrRef default: chromeTextColor: Colour of the drag handle icons on dialogs and floating toolbars. The icon is drawn at half the opacity of this colour. A colour string, or a theme-colour reference object.

Tooltips

See Tooltips for more information.

tooltipBackgroundColor AgCssColorOrRef default: chromeBackgroundColor: Background colour for tooltips. A colour string, or a theme-colour reference object.
tooltipBorder boolean | AgBorderThemeParam default: color: borderColor, width: borderWidth: Border around tooltips. `true` for the default border, `false` to disable, or an object to customise it.
tooltipBorderRadius PixelSize default: borderRadius: Corner radius for tooltips.
tooltipSubtleTextColor AgCssColorOrRef default: chromeSubtleTextColor: Colour of text that should stand out less in tooltips. A colour string, or a theme-colour reference object.
tooltipTextColor AgCssColorOrRef default: chromeTextColor: Text colour for tooltips. A colour string, or a theme-colour reference object.

Toolbars

chromeFontFamily FontFamilyFull default: fontFamily: Font family used for text in tooltips, menus, dialogs, toolbars, buttons and text inputs. A single family name, or an array of names used as fallbacks.
chromeFontSize FontSize default: fontSize: Font size used for text in tooltips, menus, dialogs, toolbars, buttons and text inputs.
chromeFontWeight FontWeight default: fontWeight: Font weight used for text in tooltips, menus, dialogs, toolbars, buttons and text inputs.
chromeLineHeight Ratio default: lineHeight: Line height of text in tooltips, menus, dialogs, toolbars, buttons and text inputs, as a ratio of their font size.
chromeSubtleTextColor AgCssColorOrRef default: subtleTextColor: Colour of text that should stand out less than the default in tooltips, menus, dialogs, toolbars and buttons. A colour string, or a theme-colour reference object.
chromeTextColor AgCssColorOrRef default: textColor: Default colour for text in tooltips, menus, dialogs, toolbars, buttons and text inputs. A colour string, or a theme-colour reference object.

Colour Picker

colorPickerColorBorderRadius PixelSize default: borderRadius: Corner radius of the colour swatch in the colour picker. Defaults to half of `borderRadius`.
colorPickerThumbBorderWidth PixelSize: Width of the ring drawn around the draggable thumbs of the colour picker.
colorPickerThumbSize PixelSize: Size of the draggable thumbs of the colour picker.
colorPickerTrackBorderRadius PixelSize default: borderRadius: Corner radius of the hue and opacity tracks of the colour picker. Defaults to 99 times `borderRadius`.
colorPickerTrackSize PixelSize: Height of the hue and opacity tracks of the colour picker.

Scrollbars

See Scrollbar for more information.

scrollbarThickness PixelSize: Thickness of the scrollbar track.
scrollbarThumbBackgroundColor AgCssColorOrRef default: foregroundColor + backgroundColor: Background colour of the scrollbar thumb. A colour string, or a theme-colour reference object.
scrollbarThumbBorder boolean | AgBorderThemeParam default: borderColor + foregroundColor: Border around the scrollbar thumb. `true` for the default border, `false` to disable, or an object to customise it.
scrollbarThumbBorderRadius PixelSize: Corner radius of the scrollbar thumb.
scrollbarTrackBackgroundColor AgCssColorOrRef default: foregroundColor + backgroundColor: Background colour of the scrollbar track. A colour string, or a theme-colour reference object.
scrollbarTrackBorder boolean | AgBorderThemeParam default: borderColor + foregroundColor: Border around the scrollbar track. `true` for the default border, `false` to disable, or an object to customise it.
scrollbarTrackBorderRadius PixelSize: Corner radius of the scrollbar track.
scrollbarThumbHoverBackgroundColor AgCssColorOrRef default: scrollbarThumbBackgroundColor + foregroundColor: Background colour of the scrollbar thumb when hovered. A colour string, or a theme-colour reference object.
scrollbarThumbHoverBorder boolean | AgBorderThemeParam default: scrollbarThumbBorder + foregroundColor: Border around the scrollbar thumb when hovered. `true` for the default border, `false` to disable, or an object to customise it.

Navigator

See Navigator for more information.

navigatorHandleBackgroundColor AgCssColorOrRef default: chartBackgroundColor: Background colour of the navigator handles. A colour string, or a theme-colour reference object.
navigatorHandleBorder boolean | AgBorderThemeParam default: borderColor: Border around the navigator handles. Its colour also colours the handle grip. `true` for the default border, `false` to disable, or an object to customise it.
navigatorHandleBorderRadius PixelSize default: borderRadius: Corner radius of the navigator handles.
navigatorThumbBackgroundColor AgCssColorOrRef: Background colour of the navigator thumb, the selected range between the handles. A colour string, or a theme-colour reference object.
navigatorTrackBackgroundColor AgCssColorOrRef default: foregroundColor: Background colour of the navigator track, the dimmed area outside the selected range. A colour string, or a theme-colour reference object.
navigatorTrackBorder boolean | AgBorderThemeParam default: borderColor: Border around the navigator track. `true` for the default border, `false` to disable, or an object to customise it.
navigatorTrackBorderRadius PixelSize default: borderRadius: Corner radius of the navigator track. Also rounds the selected range and the mini chart.