Category Axis Config
Configure the chart category axis content and styling.
- Validation: should be an object with any of the properties {
axisLine,backgroundFront,backgroundStyle,categoryCountPadding,categoryPaddingFraction,collapsed,dateUTC,focusRange,focusTickMark,gridLine,keyProperty,marginInner,marginOuter,max,maxOffset,maxTickCount,min,minCategoryValueExtent,minOffset,minTickInterval,minTickSpacing,paddingInner,paddingOuter,property,reversed,scale,side,softMax,softMin,thresholds,tickCount,tickLabel,tickMark,title,type,valueFormat,valueLabel,valuePrefix,valueSuffix,visible}
Every property is optional and falls back to its default, except property, which must be given. Property anchors are stable: link to any entry as #categoryAxis.propertyName, and to a member of a nested property as #categoryAxis.propertyName.memberName.
A property holding a list of objects documents the members of one entry, headed thresholds[].front. Their anchors leave the brackets out: #categoryAxis.thresholds.front.
axisLine
The line drawn along the length of the axis.
- Default:
{ visible: true, front: false, marginInner: 0, style: { … } } - Validation: should be an object with any of the properties {
front,marginInner,style,visible} - Used in: Multiple Axes · Picket Fence Bars · Curved Lines · +1 more
axisLine.front
Whether the axis line should be shown in front (true) or behind (false) the series shapes.
- Default:
false - Validation:
should be a boolean
axisLine.marginInner
The margin (in pixels) between the line shown along the axis and the inner boundary of the axis.
- Default:
0 - Validation:
should be a number >= to 0 - Used in: Multiple Axes · Picket Fence Bars · Curved Lines · +1 more
axisLine.style
The style of the line shown along the axis.
- Default:
{ normal: { … }, focused: { … }, defocused: { … } } - Validation: should be an object with any of the properties {
defocused,focused,normal}
axisLine.style.defocused
The style of the line shown along the axis, while the axis is defocused.
- Default:
{ strokeColor: "same", strokeOpacity: 0.325, strokeWidth: "same", strokeDashArray: "same" } - Validation: should be an object with any of the properties {
strokeColor,strokeDashArray,strokeOpacity,strokeWidth}
axisLine.style.defocused.strokeColor
The color of the stroke (outline): use "none" to switch the stroke off, or "currentColor" to follow the host page's css color, or "same" to use the color of the normal state.
- Default:
"same" - Validation:
should be a valid svg color (or "none" / "currentColor") or be equal to "same"
axisLine.style.defocused.strokeDashArray
The dash array pattern of the stroke (e.g. "5, 5"), or null for a solid stroke, or "same" to use the value of the normal state.
- Default:
"same" - Validation:
should be a valid dash array or be one of [ null, "same" ]
axisLine.style.defocused.strokeOpacity
The opacity (0 - 1) of the stroke.
- Default:
0.325 - Validation:
should be a number >= to 0 and <= 1
axisLine.style.defocused.strokeWidth
The width (in pixels) of the stroke, or null to leave the svg stroke-width attribute unset, or "same" to use the value of the normal state.
- Default:
"same" - Validation:
should be a number >= to 0 or be one of [ null, "same" ]
axisLine.style.focused
The style of the line shown along the axis, while the axis is focused.
- Default:
{ strokeColor: "same", strokeOpacity: 0.65, strokeWidth: "same", strokeDashArray: "same" } - Validation: should be an object with any of the properties {
strokeColor,strokeDashArray,strokeOpacity,strokeWidth}
axisLine.style.focused.strokeColor
The color of the stroke (outline): use "none" to switch the stroke off, or "currentColor" to follow the host page's css color, or "same" to use the color of the normal state.
- Default:
"same" - Validation:
should be a valid svg color (or "none" / "currentColor") or be equal to "same"
axisLine.style.focused.strokeDashArray
The dash array pattern of the stroke (e.g. "5, 5"), or null for a solid stroke, or "same" to use the value of the normal state.
- Default:
"same" - Validation:
should be a valid dash array or be one of [ null, "same" ]
axisLine.style.focused.strokeOpacity
The opacity (0 - 1) of the stroke.
- Default:
0.65 - Validation:
should be a number >= to 0 and <= 1
axisLine.style.focused.strokeWidth
The width (in pixels) of the stroke, or null to leave the svg stroke-width attribute unset, or "same" to use the value of the normal state.
- Default:
"same" - Validation:
should be a number >= to 0 or be one of [ null, "same" ]
axisLine.style.normal
The style of the line shown along the axis, while the axis is neither focused nor defocused.
- Default:
{ strokeColor: "currentColor", strokeOpacity: 0.65, strokeWidth: 1, strokeDashArray: null } - Validation: should be an object with any of the properties {
strokeColor,strokeDashArray,strokeOpacity,strokeWidth}
axisLine.style.normal.strokeColor
The color of the stroke (outline): use "none" to switch the stroke off, or "currentColor" to follow the host page's css color.
- Default:
"currentColor" - Validation:
should be a valid svg color (or "none" / "currentColor")
axisLine.style.normal.strokeDashArray
The dash array pattern of the stroke (e.g. "5, 5"), or null for a solid stroke.
- Default:
null - Validation:
should be a valid dash array or be equal to null
axisLine.style.normal.strokeOpacity
The opacity (0 - 1) of the stroke.
- Default:
0.65 - Validation:
should be a number >= to 0 and <= 1
axisLine.style.normal.strokeWidth
The width (in pixels) of the stroke, or null to leave the svg stroke-width attribute unset.
- Default:
1 - Validation:
should be a number >= to 0 or be equal to null
axisLine.visible
Whether to show a line along the length of the axis.
- Default:
true - Validation:
should be a boolean - Used in: Multiple Axes · Picket Fence Bars · Curved Lines · +1 more
backgroundFront
Whether the axis background should be shown in front (true) or behind (false) the series shapes.
- Default:
false - Validation:
should be a boolean
backgroundStyle
The styles to apply to the axis background (strokeColor, strokeOpacity, strokeWidth, fillColor, fillOpacity (use null for none)).
- Default:
{ strokeColor: "currentColor", strokeOpacity: 0, strokeWidth: null, strokeDashArray: null, fillColor: null, fillOpacity: 0 } - Validation: should be an object with any of the properties {
fillColor,fillOpacity,strokeColor,strokeDashArray,strokeOpacity,strokeWidth}
backgroundStyle.fillColor
The color of the fill: use null to leave the svg fill attribute unset so that css can supply it, "none" to switch the fill off, or "currentColor" to follow the host page's css color.
- Default:
null - Validation:
should be a valid svg color (or "none" / "currentColor") or be equal to null
backgroundStyle.fillOpacity
The opacity (0 - 1) of the fill, or null to leave the svg fill-opacity attribute unset.
- Default:
0 - Validation:
should be a number >= to 0 and <= 1 or be equal to null
backgroundStyle.strokeColor
The color of the stroke (outline): use null to leave the svg stroke attribute unset so that css can supply it, "none" to switch the stroke off, or "currentColor" to follow the host page's css color.
- Default:
"currentColor" - Validation:
should be a valid svg color (or "none" / "currentColor") or be equal to null
backgroundStyle.strokeDashArray
The dash array pattern of the stroke (e.g. "5, 5"), or null for a solid stroke.
- Default:
null - Validation:
should be a valid dash array or be equal to null
backgroundStyle.strokeOpacity
The opacity (0 - 1) of the stroke, or null to leave the svg stroke-opacity attribute unset.
- Default:
0 - Validation:
should be a number >= to 0 and <= 1 or be equal to null
backgroundStyle.strokeWidth
The width (in pixels) of the stroke, or null to leave the svg stroke-width attribute unset.
- Default:
null - Validation:
should be a number >= to 0 or be equal to null
categoryCountPadding
The extra count to be added to the category value count when dividing the category extent for displaying category values.
- Default:
1 - Validation:
should be a number >= to 0 - Used in: Bubble Chart
categoryPaddingFraction
The padding fractions (0 - 1) of the category extent for all category values (outer) and grouped series (inner).
- Default:
{ inner: 0.1, outer: 0.1 } - Validation: should be an object with any of the properties {
inner,outer} - Used in: Histogram · Heatmap
categoryPaddingFraction.inner
The fraction (0 - 1) of a category value's extent to leave as space between the series drawn inside it.
categoryPaddingFraction.outer
The fraction (0 - 1) to trim from each category value's extent, leaving space between neighbouring category values.
collapsed
Whether the axis should consume space in the layout (false) or not (true).
- Default:
false - Validation:
should be a boolean
dateUTC
Whether dates should be treated as UTC (true) or local (false).
- Default:
true - Validation:
should be a boolean - Used in: Staged animation · Multiple Axes · Picket Fence Bars · Curved Lines
focusRange
The band drawn over the axis at its focused series domain or category value.
- Default:
{ visible: false, front: false, applyToTitle: false, style: { … } } - Validation: should be an object with any of the properties {
applyToTitle,front,style,visible}
focusRange.applyToTitle
Whether to show the focus range only over tick labels (false) or over both tick labels and title (true).
- Default:
false - Validation:
should be a boolean
focusRange.front
Whether the focus range should be shown in front (true) or behind (false) the series shapes.
- Default:
false - Validation:
should be a boolean
focusRange.style
The style of the focus range.
- Default:
{ strokeColor: "currentColor", strokeOpacity: 0.2, strokeWidth: 1, strokeDashArray: null, fillColor: "currentColor", fillOpacity: 0.12 } - Validation: should be an object with any of the properties {
fillColor,fillOpacity,strokeColor,strokeDashArray,strokeOpacity,strokeWidth}
focusRange.style.fillColor
The color of the fill: use "none" to switch the fill off, or "currentColor" to follow the host page's css color.
- Default:
"currentColor" - Validation:
should be a valid svg color (or "none" / "currentColor")
focusRange.style.fillOpacity
The opacity (0 - 1) of the fill.
- Default:
0.12 - Validation:
should be a number >= to 0 and <= 1
focusRange.style.strokeColor
The color of the stroke (outline): use "none" to switch the stroke off, or "currentColor" to follow the host page's css color.
- Default:
"currentColor" - Validation:
should be a valid svg color (or "none" / "currentColor")
focusRange.style.strokeDashArray
The dash array pattern of the stroke (e.g. "5, 5"), or null for a solid stroke.
- Default:
null - Validation:
should be a valid dash array or be equal to null
focusRange.style.strokeOpacity
The opacity (0 - 1) of the stroke.
- Default:
0.2 - Validation:
should be a number >= to 0 and <= 1
focusRange.style.strokeWidth
The width (in pixels) of the stroke, or null to leave the svg stroke-width attribute unset.
- Default:
1 - Validation:
should be a number >= to 0 or be equal to null
focusRange.visible
Whether to show the focus range on the axis when it has a focused series domain or category value.
- Default:
false - Validation:
should be a boolean
focusTickMark
The tick marks drawn perpendicular to the axis at its focused series domain or category value.
- Default:
{ visible: true, front: false, size: 9, marginInner: 3, style: { … } } - Validation: should be an object with any of the properties {
front,marginInner,size,style,visible}
focusTickMark.front
Whether the focus tick marks should be shown in front (true) or behind (false) the series shapes.
- Default:
false - Validation:
should be a boolean
focusTickMark.marginInner
The margin (in pixels) to show between the inside of the axis and the focus tick mark line(s).
- Default:
3 - Validation:
should be a number >= to 0
focusTickMark.size
The length (in pixels) of the focus tick mark line(s).
- Default:
9 - Validation:
should be a number >= to 0
focusTickMark.style
The style of the focus tick mark line(s).
- Default:
{ strokeColor: "currentColor", strokeOpacity: 1, strokeWidth: 3, strokeDashArray: null } - Validation: should be an object with any of the properties {
strokeColor,strokeDashArray,strokeOpacity,strokeWidth}
focusTickMark.style.strokeColor
The color of the stroke (outline): use "none" to switch the stroke off, or "currentColor" to follow the host page's css color.
- Default:
"currentColor" - Validation:
should be a valid svg color (or "none" / "currentColor")
focusTickMark.style.strokeDashArray
The dash array pattern of the stroke (e.g. "5, 5"), or null for a solid stroke.
- Default:
null - Validation:
should be a valid dash array or be equal to null
focusTickMark.style.strokeOpacity
The opacity (0 - 1) of the stroke.
- Default:
1 - Validation:
should be a number >= to 0 and <= 1
focusTickMark.style.strokeWidth
The width (in pixels) of the stroke, or null to leave the svg stroke-width attribute unset.
- Default:
3 - Validation:
should be a number >= to 0 or be equal to null
focusTickMark.visible
Whether to show lines perpendicular to the axis showing the focused series domain or category value.
- Default:
true - Validation:
should be a boolean
gridLine
The grid lines drawn across the plot at each tick on the axis.
- Default:
{ visible: false, front: false, style: { … } } - Validation: should be an object with any of the properties {
front,style,visible} - Used in: Picket Fence Bars · Missing Values · Missing Pos/Neg Stacked Values · +2 more
gridLine.front
Whether the axis grid lines should be shown in front (true) or behind (false) the series shapes.
- Default:
false - Validation:
should be a boolean
gridLine.style
The style of the axis grid lines.
- Default:
{ normal: { … }, focused: { … }, defocused: { … } } - Validation: should be an object with any of the properties {
defocused,focused,normal} - Used in: Missing Pos/Neg Stacked Values
gridLine.style.defocused
The style of the axis grid lines, while the axis is defocused.
- Default:
{ strokeColor: "same", strokeOpacity: 0.09, strokeWidth: "same", strokeDashArray: "same" } - Validation: should be an object with any of the properties {
strokeColor,strokeDashArray,strokeOpacity,strokeWidth}
gridLine.style.defocused.strokeColor
The color of the stroke (outline): use "none" to switch the stroke off, or "currentColor" to follow the host page's css color, or "same" to use the color of the normal state.
- Default:
"same" - Validation:
should be a valid svg color (or "none" / "currentColor") or be equal to "same"
gridLine.style.defocused.strokeDashArray
The dash array pattern of the stroke (e.g. "5, 5"), or null for a solid stroke, or "same" to use the value of the normal state.
- Default:
"same" - Validation:
should be a valid dash array or be one of [ null, "same" ]
gridLine.style.defocused.strokeOpacity
The opacity (0 - 1) of the stroke.
- Default:
0.09 - Validation:
should be a number >= to 0 and <= 1
gridLine.style.defocused.strokeWidth
The width (in pixels) of the stroke, or null to leave the svg stroke-width attribute unset, or "same" to use the value of the normal state.
- Default:
"same" - Validation:
should be a number >= to 0 or be one of [ null, "same" ]
gridLine.style.focused
The style of the axis grid lines, while the axis is focused.
- Default:
{ strokeColor: "same", strokeOpacity: 0.17, strokeWidth: "same", strokeDashArray: "same" } - Validation: should be an object with any of the properties {
strokeColor,strokeDashArray,strokeOpacity,strokeWidth}
gridLine.style.focused.strokeColor
The color of the stroke (outline): use "none" to switch the stroke off, or "currentColor" to follow the host page's css color, or "same" to use the color of the normal state.
- Default:
"same" - Validation:
should be a valid svg color (or "none" / "currentColor") or be equal to "same"
gridLine.style.focused.strokeDashArray
The dash array pattern of the stroke (e.g. "5, 5"), or null for a solid stroke, or "same" to use the value of the normal state.
- Default:
"same" - Validation:
should be a valid dash array or be one of [ null, "same" ]
gridLine.style.focused.strokeOpacity
The opacity (0 - 1) of the stroke.
- Default:
0.17 - Validation:
should be a number >= to 0 and <= 1
gridLine.style.focused.strokeWidth
The width (in pixels) of the stroke, or null to leave the svg stroke-width attribute unset, or "same" to use the value of the normal state.
- Default:
"same" - Validation:
should be a number >= to 0 or be one of [ null, "same" ]
gridLine.style.normal
The style of the axis grid lines, while the axis is neither focused nor defocused.
- Default:
{ strokeColor: "currentColor", strokeOpacity: 0.13, strokeWidth: 1, strokeDashArray: "5, 5" } - Validation: should be an object with any of the properties {
strokeColor,strokeDashArray,strokeOpacity,strokeWidth} - Used in: Missing Pos/Neg Stacked Values
gridLine.style.normal.strokeColor
The color of the stroke (outline): use "none" to switch the stroke off, or "currentColor" to follow the host page's css color.
- Default:
"currentColor" - Validation:
should be a valid svg color (or "none" / "currentColor")
gridLine.style.normal.strokeDashArray
The dash array pattern of the stroke (e.g. "5, 5"), or null for a solid stroke.
- Default:
"5, 5" - Validation:
should be a valid dash array or be equal to null - Used in: Missing Pos/Neg Stacked Values
gridLine.style.normal.strokeOpacity
The opacity (0 - 1) of the stroke.
- Default:
0.13 - Validation:
should be a number >= to 0 and <= 1
gridLine.style.normal.strokeWidth
The width (in pixels) of the stroke, or null to leave the svg stroke-width attribute unset.
- Default:
1 - Validation:
should be a number >= to 0 or be equal to null - Used in: Missing Pos/Neg Stacked Values
gridLine.visible
Whether to show grid lines perpendicular to each tick on the axis.
- Default:
false - Validation:
should be a boolean - Used in: Picket Fence Bars · Missing Values · Missing Pos/Neg Stacked Values · +2 more
keyProperty
The property to retrieve from the data provider for the category keys, when the category values may repeat (use null for none).
When set, this property’s values (strings or numbers, one per category) identify the categories instead of the category values themselves: they must be unique, and they are what animation, focus and filtering match categories by across data changes. Use it when the category values would otherwise repeat — a label keyed by an id, or a wall-clock date whose real instants repeat.
- Default:
null - Validation:
should be a string naming a data property or be equal to null - Used in: Truncated Text
marginInner
The inner (closest to chart) margin (in pixels) of the axis.
- Default:
0 - Validation:
should be a number >= to 0
marginOuter
The outer (furthest from chart) margin (in pixels) of the axis.
- Default:
1 - Validation:
should be a number >= to 0
max
The forced maximum value for the axis: a number, or a date on a date category axis (use "auto" to compute from the values); must be >= min unless either is "auto" (set reversed to run the axis backwards).
The form the bound takes follows type on a linear axis: a number when type is number, and either a millisecond timestamp or an ISO date string ("2020-01-01") when type is date — the two forms thresholds[].value takes. An ordinal axis places its categories in data order, so it accepts only "auto".
- Default:
"auto" - Validation:
should be an iso date string or epoch number or be equal to "auto" when scale is linear and type is date;should be a number or be equal to "auto" when scale is linear and type is number;should be equal to "auto" when scale is ordinal - Used in: Missing Pos/Neg Stacked Values · Clipped Values
maxOffset
The numeric offset to apply to the maximum value of the axis.
- Default:
0 - Validation:
should be a number when scale is linear;should be equal to 0 when scale is ordinal
maxTickCount
The maximum number of ticks to show along the length of the axis (use 0 to disable the maximum).
- Default:
10— when scale is linear0— when scale is ordinal
- Validation:
should be an integer and >= to 0 - Used in: Fewer ticks instead
min
The forced minimum value for the axis: a number, or a date on a date category axis (use "auto" to compute from the values); must be <= max unless either is "auto" (set reversed to run the axis backwards).
The form the bound takes follows type on a linear axis: a number when type is number, and either a millisecond timestamp or an ISO date string ("2020-01-01") when type is date — the two forms thresholds[].value takes. An ordinal axis places its categories in data order, so it accepts only "auto".
- Default:
"auto" - Validation:
should be an iso date string or epoch number or be equal to "auto" when scale is linear and type is date;should be a number or be equal to "auto" when scale is linear and type is number;should be equal to "auto" when scale is ordinal - Used in: Missing Pos/Neg Stacked Values · Clipped Values
minCategoryValueExtent
The minimum extent (in pixels) of each category slot; for a non-inverted bar chart this is a minimum bar width.
- Default:
1 - Validation:
should be a number >= to 1
minOffset
The numeric offset to apply to the minimum value of the axis.
- Default:
0 - Validation:
should be a number when scale is linear;should be equal to 0 when scale is ordinal
minTickInterval
The minimum value interval to use between any two consecutive tick label values.
- Default:
0 - Validation:
should be a number >= to 0
minTickSpacing
The minimum space (in pixels) to allow between the bounds of any tick label text.
- Default:
12— when scale is linear4— when scale is ordinal
- Validation:
should be a number >= to 0 - Used in: Fewer ticks instead
paddingInner
The inner (closest to chart) padding (in pixels) of the axis.
- Default:
0 - Validation:
should be a number >= to 0
paddingOuter
The outer (furthest from chart) padding (in pixels) of the axis.
- Default:
1 - Validation:
should be a number >= to 0
property
The property to retrieve from the data provider for the category values.
The chart reads this property from each entry of the data provider to get the category value: the values must match type, they position a linear axis, and they are what tick labels and the tooltip show. They must be unique unless keyProperty is set. It is required — the only category axis property without a default.
- Required: a value must be given (there is no default)
- Validation:
should be a string naming a data property - Used in: Home · Getting started · Staged animation · Stacked · Grouped · Grouped Across Axes · +60 more
reversed
Whether the axis runs in the opposite direction, so its minimum is drawn where its maximum normally would be (an ordinal category axis reverses its category order).
- Default:
false - Validation:
should be a boolean
scale
The scale to use for the category values (ordinal, linear).
ordinal places the categories at evenly spaced positions in data order regardless of their values; linear positions number/date category values proportionally along the axis, so uneven spacing in the data shows as uneven spacing in the chart.
- Default:
"ordinal" - Validation:
should be equal to "ordinal" when type is string;should be one of [ "linear", "ordinal" ] - Used in: Home · Getting started · Staged animation · Stacked · Grouped · Grouped Across Axes · +58 more
side
Whether the axis is placed at the start (top/left) or end (bottom/right) of the chart.
- Default:
"start"— when plot.inverted is true"end"— when plot.inverted is false
- Validation:
should be one of [ "start", "end" ] - Used in: Multiple Axes · Picket Fence Bars · Curved Lines · +2 more
softMax
The maximum value for the axis to cover while no data value is greater than it, taking the same forms as max (use null to disable).
Takes the same forms as max — a number, or a timestamp or ISO date string on a date axis — but only applies while no category value rises above it, so real data still expands the domain. An ordinal axis accepts only null.
- Default:
null - Validation:
should be an iso date string or epoch number or be equal to null when scale is linear and type is date;should be a number or be equal to null when scale is linear and type is number;should be equal to null when scale is ordinal
softMin
The minimum value for the axis to cover while no data value is less than it, taking the same forms as min (use null to disable).
Takes the same forms as min — a number, or a timestamp or ISO date string on a date axis — but only applies while no category value falls below it, so real data still expands the domain. An ordinal axis accepts only null.
- Default:
null - Validation:
should be an iso date string or epoch number or be equal to null when scale is linear and type is date;should be a number or be equal to null when scale is linear and type is number;should be equal to null when scale is ordinal
thresholds
The threshold lines to draw on the axis, each an object drawing a reference line across the plot at an axis value (the array replaces the default wholesale).
An ordinal axis places its categories at evenly spaced positions rather than on a value scale, so there is no position to place a threshold at — it accepts only an empty array. On a linear axis each entry's value takes the same forms as min: a number when type is number, and either a millisecond timestamp or an ISO date string when type is date.
- Default:
[] - Validation: should be an array with elements that should be an object with exact properties {
front,style,title,value}
thresholds[].front
Whether the line is drawn in front of (true) or behind (false) the series shapes.
- Default:
true - Validation:
should be a boolean or be equal to undefined
thresholds[].style
The style of the threshold line.
- Default:
{ normal: { … }, focused: { … }, defocused: { … } } - Validation: should be an object with any of the properties {
defocused,focused,normal} or be equal to undefined
thresholds[].style.defocused
The style of the threshold line, while the axis is defocused.
- Default:
{ strokeColor: "same", strokeOpacity: 0.325, strokeWidth: "same", strokeDashArray: "same" } - Validation: should be an object with any of the properties {
strokeColor,strokeDashArray,strokeOpacity,strokeWidth}
thresholds[].style.defocused.strokeColor
The color of the stroke (outline): use "none" to switch the stroke off, or "currentColor" to follow the host page's css color, or "same" to use the color of the normal state.
- Default:
"same" - Validation:
should be a valid svg color (or "none" / "currentColor") or be equal to "same"
thresholds[].style.defocused.strokeDashArray
The dash array pattern of the stroke (e.g. "5, 5"), or null for a solid stroke, or "same" to use the value of the normal state.
- Default:
"same" - Validation:
should be a valid dash array or be one of [ null, "same" ]
thresholds[].style.defocused.strokeOpacity
The opacity (0 - 1) of the stroke.
- Default:
0.325 - Validation:
should be a number >= to 0 and <= 1
thresholds[].style.defocused.strokeWidth
The width (in pixels) of the stroke, or null to leave the svg stroke-width attribute unset, or "same" to use the value of the normal state.
- Default:
"same" - Validation:
should be a number >= to 0 or be one of [ null, "same" ]
thresholds[].style.focused
The style of the threshold line, while the axis is focused.
- Default:
{ strokeColor: "same", strokeOpacity: 0.65, strokeWidth: "same", strokeDashArray: "same" } - Validation: should be an object with any of the properties {
strokeColor,strokeDashArray,strokeOpacity,strokeWidth}
thresholds[].style.focused.strokeColor
The color of the stroke (outline): use "none" to switch the stroke off, or "currentColor" to follow the host page's css color, or "same" to use the color of the normal state.
- Default:
"same" - Validation:
should be a valid svg color (or "none" / "currentColor") or be equal to "same"
thresholds[].style.focused.strokeDashArray
The dash array pattern of the stroke (e.g. "5, 5"), or null for a solid stroke, or "same" to use the value of the normal state.
- Default:
"same" - Validation:
should be a valid dash array or be one of [ null, "same" ]
thresholds[].style.focused.strokeOpacity
The opacity (0 - 1) of the stroke.
- Default:
0.65 - Validation:
should be a number >= to 0 and <= 1
thresholds[].style.focused.strokeWidth
The width (in pixels) of the stroke, or null to leave the svg stroke-width attribute unset, or "same" to use the value of the normal state.
- Default:
"same" - Validation:
should be a number >= to 0 or be one of [ null, "same" ]
thresholds[].style.normal
The style of the threshold line, while the axis is neither focused nor defocused.
- Default:
{ strokeColor: "currentColor", strokeOpacity: 0.65, strokeWidth: 1, strokeDashArray: null } - Validation: should be an object with any of the properties {
strokeColor,strokeDashArray,strokeOpacity,strokeWidth}
thresholds[].style.normal.strokeColor
The color of the stroke (outline): use "none" to switch the stroke off, or "currentColor" to follow the host page's css color.
- Default:
"currentColor" - Validation:
should be a valid svg color (or "none" / "currentColor")
thresholds[].style.normal.strokeDashArray
The dash array pattern of the stroke (e.g. "5, 5"), or null for a solid stroke.
- Default:
null - Validation:
should be a valid dash array or be equal to null
thresholds[].style.normal.strokeOpacity
The opacity (0 - 1) of the stroke.
- Default:
0.65 - Validation:
should be a number >= to 0 and <= 1
thresholds[].style.normal.strokeWidth
The width (in pixels) of the stroke, or null to leave the svg stroke-width attribute unset.
- Default:
1 - Validation:
should be a number >= to 0 or be equal to null
thresholds[].title
The title label shown beside the threshold line.
- Default:
{ text: null, side: "high", snapToValue: true, margin: { … }, padding: { … }, textStyle: { … }, backgroundStyle: { … } } - Validation: should be an object with any of the properties {
backgroundStyle,margin,padding,side,snapToValue,text,textStyle} or be equal to undefined
thresholds[].title.backgroundStyle
The styles to apply to the threshold title background.
- Default:
{ strokeColor: "currentColor", strokeOpacity: 0, strokeWidth: null, strokeDashArray: null, fillColor: null, fillOpacity: 0 } - Validation: should be an object with any of the properties {
fillColor,fillOpacity,strokeColor,strokeDashArray,strokeOpacity,strokeWidth} or be equal to undefined
thresholds[].title.backgroundStyle.fillColor
The color of the fill: use null to leave the svg fill attribute unset so that css can supply it, "none" to switch the fill off, or "currentColor" to follow the host page's css color.
- Default:
null - Validation:
should be a valid svg color (or "none" / "currentColor") or be equal to null
thresholds[].title.backgroundStyle.fillOpacity
The opacity (0 - 1) of the fill, or null to leave the svg fill-opacity attribute unset.
- Default:
0 - Validation:
should be a number >= to 0 and <= 1 or be equal to null
thresholds[].title.backgroundStyle.strokeColor
The color of the stroke (outline): use null to leave the svg stroke attribute unset so that css can supply it, "none" to switch the stroke off, or "currentColor" to follow the host page's css color.
- Default:
"currentColor" - Validation:
should be a valid svg color (or "none" / "currentColor") or be equal to null
thresholds[].title.backgroundStyle.strokeDashArray
The dash array pattern of the stroke (e.g. "5, 5"), or null for a solid stroke.
- Default:
null - Validation:
should be a valid dash array or be equal to null
thresholds[].title.backgroundStyle.strokeOpacity
The opacity (0 - 1) of the stroke, or null to leave the svg stroke-opacity attribute unset.
- Default:
0 - Validation:
should be a number >= to 0 and <= 1 or be equal to null
thresholds[].title.backgroundStyle.strokeWidth
The width (in pixels) of the stroke, or null to leave the svg stroke-width attribute unset.
- Default:
null - Validation:
should be a number >= to 0 or be equal to null
thresholds[].title.margin
The margin (in pixels) of the threshold title, relative to its orientation.
- Default:
{ top: 0, right: 0, bottom: 0, left: 0 } - Validation: should be an object with any of the properties {
bottom,left,right,top} or be equal to undefined
thresholds[].title.margin.bottom
The space (in pixels) along the bottom edge.
- Default:
0 - Validation:
should be a number >= to 0
thresholds[].title.margin.left
The space (in pixels) along the left edge.
- Default:
0 - Validation:
should be a number >= to 0
thresholds[].title.margin.right
The space (in pixels) along the right edge.
- Default:
0 - Validation:
should be a number >= to 0
thresholds[].title.margin.top
The space (in pixels) along the top edge.
- Default:
0 - Validation:
should be a number >= to 0
thresholds[].title.padding
The padding (in pixels) of the threshold title, relative to its orientation.
- Default:
{ top: 0, right: 0, bottom: 0, left: 0 } - Validation: should be an object with any of the properties {
bottom,left,right,top} or be equal to undefined
thresholds[].title.padding.bottom
The space (in pixels) along the bottom edge.
- Default:
0 - Validation:
should be a number >= to 0
thresholds[].title.padding.left
The space (in pixels) along the left edge.
- Default:
0 - Validation:
should be a number >= to 0
thresholds[].title.padding.right
The space (in pixels) along the right edge.
- Default:
0 - Validation:
should be a number >= to 0
thresholds[].title.padding.top
The space (in pixels) along the top edge.
- Default:
0 - Validation:
should be a number >= to 0
thresholds[].title.side
Which value side of the line the title sits on ("low" for smaller values, "high" for larger).
- Default:
"high" - Validation:
should be one of [ "low", "high" ] or be equal to undefined
thresholds[].title.snapToValue
Whether the title flips to the other side of the line when its own side has no room, instead of being clamped inside the plot over the line.
- Default:
true - Validation:
should be a boolean or be equal to undefined
thresholds[].title.text
The title text shown beside the line (use null for none).
- Default:
null - Validation:
should be a string or be one of [ null, undefined ]
thresholds[].title.textStyle
The style of the threshold title text.
- Default:
{ normal: { … }, focused: { … }, defocused: { … } } - Validation: should be an object with any of the properties {
defocused,focused,normal} or be equal to undefined
thresholds[].title.textStyle.defocused
The style of the threshold title text, while the axis is defocused.
- Default:
{ strokeColor: "same", strokeOpacity: 1, strokeWidth: null, strokeDashArray: "same", fillColor: "same", fillOpacity: 1 } - Validation: should be an object with any of the properties {
fillColor,fillOpacity,strokeColor,strokeDashArray,strokeOpacity,strokeWidth}
thresholds[].title.textStyle.defocused.fillColor
The color of the fill: use "none" to switch the fill off, or "currentColor" to follow the host page's css color, or "same" to use the color of the normal state.
- Default:
"same" - Validation:
should be a valid svg color (or "none" / "currentColor") or be equal to "same"
thresholds[].title.textStyle.defocused.fillOpacity
The opacity (0 - 1) of the fill.
- Default:
1 - Validation:
should be a number >= to 0 and <= 1
thresholds[].title.textStyle.defocused.strokeColor
The color of the stroke (outline): use "none" to switch the stroke off, or "currentColor" to follow the host page's css color, or "same" to use the color of the normal state.
- Default:
"same" - Validation:
should be a valid svg color (or "none" / "currentColor") or be equal to "same"
thresholds[].title.textStyle.defocused.strokeDashArray
The dash array pattern of the stroke (e.g. "5, 5"), or null for a solid stroke, or "same" to use the value of the normal state.
- Default:
"same" - Validation:
should be a valid dash array or be one of [ null, "same" ]
thresholds[].title.textStyle.defocused.strokeOpacity
The opacity (0 - 1) of the stroke.
- Default:
1 - Validation:
should be a number >= to 0 and <= 1
thresholds[].title.textStyle.defocused.strokeWidth
The width (in pixels) of the stroke, or null to leave the svg stroke-width attribute unset, or "same" to use the value of the normal state.
- Default:
null - Validation:
should be a number >= to 0 or be one of [ null, "same" ]
thresholds[].title.textStyle.focused
The style of the threshold title text, while the axis is focused.
- Default:
{ strokeColor: "same", strokeOpacity: 1, strokeWidth: null, strokeDashArray: "same", fillColor: "same", fillOpacity: 1 } - Validation: should be an object with any of the properties {
fillColor,fillOpacity,strokeColor,strokeDashArray,strokeOpacity,strokeWidth}
thresholds[].title.textStyle.focused.fillColor
The color of the fill: use "none" to switch the fill off, or "currentColor" to follow the host page's css color, or "same" to use the color of the normal state.
- Default:
"same" - Validation:
should be a valid svg color (or "none" / "currentColor") or be equal to "same"
thresholds[].title.textStyle.focused.fillOpacity
The opacity (0 - 1) of the fill.
- Default:
1 - Validation:
should be a number >= to 0 and <= 1
thresholds[].title.textStyle.focused.strokeColor
The color of the stroke (outline): use "none" to switch the stroke off, or "currentColor" to follow the host page's css color, or "same" to use the color of the normal state.
- Default:
"same" - Validation:
should be a valid svg color (or "none" / "currentColor") or be equal to "same"
thresholds[].title.textStyle.focused.strokeDashArray
The dash array pattern of the stroke (e.g. "5, 5"), or null for a solid stroke, or "same" to use the value of the normal state.
- Default:
"same" - Validation:
should be a valid dash array or be one of [ null, "same" ]
thresholds[].title.textStyle.focused.strokeOpacity
The opacity (0 - 1) of the stroke.
- Default:
1 - Validation:
should be a number >= to 0 and <= 1
thresholds[].title.textStyle.focused.strokeWidth
The width (in pixels) of the stroke, or null to leave the svg stroke-width attribute unset, or "same" to use the value of the normal state.
- Default:
null - Validation:
should be a number >= to 0 or be one of [ null, "same" ]
thresholds[].title.textStyle.normal
The style of the threshold title text, while the axis is neither focused nor defocused.
- Default:
{ strokeColor: "none", strokeOpacity: 1, strokeWidth: null, strokeDashArray: null, fillColor: "currentColor", fillOpacity: 1 } - Validation: should be an object with any of the properties {
fillColor,fillOpacity,strokeColor,strokeDashArray,strokeOpacity,strokeWidth}
thresholds[].title.textStyle.normal.fillColor
The color of the fill: use "none" to switch the fill off, or "currentColor" to follow the host page's css color.
- Default:
"currentColor" - Validation:
should be a valid svg color (or "none" / "currentColor")
thresholds[].title.textStyle.normal.fillOpacity
The opacity (0 - 1) of the fill.
- Default:
1 - Validation:
should be a number >= to 0 and <= 1
thresholds[].title.textStyle.normal.strokeColor
The color of the stroke (outline): use "none" to switch the stroke off, or "currentColor" to follow the host page's css color.
- Default:
"none" - Validation:
should be a valid svg color (or "none" / "currentColor")
thresholds[].title.textStyle.normal.strokeDashArray
The dash array pattern of the stroke (e.g. "5, 5"), or null for a solid stroke.
- Default:
null - Validation:
should be a valid dash array or be equal to null
thresholds[].title.textStyle.normal.strokeOpacity
The opacity (0 - 1) of the stroke.
- Default:
1 - Validation:
should be a number >= to 0 and <= 1
thresholds[].title.textStyle.normal.strokeWidth
The width (in pixels) of the stroke, or null to leave the svg stroke-width attribute unset.
- Default:
null - Validation:
should be a number >= to 0 or be equal to null
thresholds[].value
The axis value to draw the threshold line at (on a date category axis, a millisecond timestamp or ISO date string); thresholds never extend the axis domain, and a value outside it is not drawn.
- Required: a value must be given (there is no default)
- Validation:
should be an iso date string or epoch number when type is date;should be a number
tickCount
The number of ticks to show along the length of the axis (use "auto" to derive the tick count from the data).
- Default:
"auto" - Validation:
should be an integer and >= to 0 or be equal to "auto" - Used in: Picket Fence Bars
tickLabel
The labels shown at each tick along the axis.
- Default:
{ front: false, anchor: "auto", backgroundStyle: { … }, size: "auto", marginInner: 2, marginOuter: 1, paddingInner: 5, paddingOuter: 5, format: "auto", prefix: null, suffix: null, rotation: 0, textStyle: { … }, truncation: { … } } - Validation: should be an object with any of the properties {
anchor,backgroundStyle,format,front,marginInner,marginOuter,paddingInner,paddingOuter,prefix,rotation,size,suffix,textStyle,truncation} - Used in: Date axis · Tooltip formatting · Staged animation · Multiple Axes · Truncated Text · Rotated Ticks · +4 more
tickLabel.anchor
The anchor to use for all axis tick labels (start, end, middle) (use "auto" to determine automatically).
- Default:
"auto" - Validation:
should be one of [ "start", "end", "middle", "auto" ]
tickLabel.backgroundStyle
The styles to apply to the axis tick label background (strokeColor, strokeOpacity, strokeWidth, fillColor, fillOpacity (use null for none)).
- Default:
{ strokeColor: "currentColor", strokeOpacity: 0, strokeWidth: null, strokeDashArray: null, fillColor: null, fillOpacity: 0 } - Validation: should be an object with any of the properties {
fillColor,fillOpacity,strokeColor,strokeDashArray,strokeOpacity,strokeWidth}
tickLabel.backgroundStyle.fillColor
The color of the fill: use null to leave the svg fill attribute unset so that css can supply it, "none" to switch the fill off, or "currentColor" to follow the host page's css color.
- Default:
null - Validation:
should be a valid svg color (or "none" / "currentColor") or be equal to null
tickLabel.backgroundStyle.fillOpacity
The opacity (0 - 1) of the fill, or null to leave the svg fill-opacity attribute unset.
- Default:
0 - Validation:
should be a number >= to 0 and <= 1 or be equal to null
tickLabel.backgroundStyle.strokeColor
The color of the stroke (outline): use null to leave the svg stroke attribute unset so that css can supply it, "none" to switch the stroke off, or "currentColor" to follow the host page's css color.
- Default:
"currentColor" - Validation:
should be a valid svg color (or "none" / "currentColor") or be equal to null
tickLabel.backgroundStyle.strokeDashArray
The dash array pattern of the stroke (e.g. "5, 5"), or null for a solid stroke.
- Default:
null - Validation:
should be a valid dash array or be equal to null
tickLabel.backgroundStyle.strokeOpacity
The opacity (0 - 1) of the stroke, or null to leave the svg stroke-opacity attribute unset.
- Default:
0 - Validation:
should be a number >= to 0 and <= 1 or be equal to null
tickLabel.backgroundStyle.strokeWidth
The width (in pixels) of the stroke, or null to leave the svg stroke-width attribute unset.
- Default:
null - Validation:
should be a number >= to 0 or be equal to null
tickLabel.format
The d3 format string (d3-format for number, d3-time-format for date) to be applied to the category values when displayed in axis tick labels (use null for none, use "auto" to derive from data).
- Default:
"auto" - Validation:
should be one of [ null, "auto" ] when type is string;should be a valid date format or be one of [ null, "auto" ] when type is date;should be a valid number format or be one of [ null, "auto" ] when type is number - Used in: Date axis · Tooltip formatting · Staged animation · Multiple Axes · Rotated Ticks · Picket Fence Bars · +3 more
tickLabel.front
Whether the axis tick labels should be shown in front (true) or behind (false) the series shapes.
- Default:
false - Validation:
should be a boolean
tickLabel.marginInner
The margin (in pixels) to show between the tick labels and the inside of the axis.
- Default:
2 - Validation:
should be a number >= to 0 - Used in: Fewer ticks instead
tickLabel.marginOuter
The margin (in pixels) to show between the tick labels and the outside of the axis.
- Default:
1 - Validation:
should be a number >= to 0
tickLabel.paddingInner
The padding (in pixels) to show between the tick labels and the inside of the axis.
- Default:
5 - Validation:
should be a number >= to 0
tickLabel.paddingOuter
The padding (in pixels) to show between the tick labels and the outside of the axis.
- Default:
5 - Validation:
should be a number >= to 0
tickLabel.prefix
The string to prefix to the text of each axis tick label (use null for none).
- Default:
null - Validation:
should be a string or be equal to null
tickLabel.rotation
The rotation (in degrees, -90 to 90) to apply to each axis tick label.
- Default:
0 - Validation:
should be a number >= to -90 and <= 90 - Used in: Tick labels · Rotated Ticks · Picket Fence Bars
tickLabel.size
The space (in pixels) perpendicular to the axis direction to allocate for the tick labels (use "auto" to derive from the font size).
- Default:
"auto" - Validation:
should be a number >= to 0 or be equal to "auto"
tickLabel.suffix
The string to append to the text of each axis tick label (use null for none).
- Default:
null - Validation:
should be a string or be equal to null
tickLabel.textStyle
The style of the axis tick label text.
- Default:
{ normal: { … }, focused: { … }, defocused: { … } } - Validation: should be an object with any of the properties {
defocused,focused,normal} - Used in: Fewer ticks instead
tickLabel.textStyle.defocused
The style of the axis tick label text, while the axis is defocused.
- Default:
{ strokeColor: "same", strokeOpacity: 0.5, strokeWidth: 0, strokeDashArray: "same", fillColor: "same", fillOpacity: 0.5 } - Validation: should be an object with any of the properties {
fillColor,fillOpacity,strokeColor,strokeDashArray,strokeOpacity,strokeWidth}
tickLabel.textStyle.defocused.fillColor
The color of the fill: use "none" to switch the fill off, or "currentColor" to follow the host page's css color, or "same" to use the color of the normal state.
- Default:
"same" - Validation:
should be a valid svg color (or "none" / "currentColor") or be equal to "same"
tickLabel.textStyle.defocused.fillOpacity
The opacity (0 - 1) of the fill.
- Default:
0.5 - Validation:
should be a number >= to 0 and <= 1
tickLabel.textStyle.defocused.strokeColor
The color of the stroke (outline): use "none" to switch the stroke off, or "currentColor" to follow the host page's css color, or "same" to use the color of the normal state.
- Default:
"same" - Validation:
should be a valid svg color (or "none" / "currentColor") or be equal to "same"
tickLabel.textStyle.defocused.strokeDashArray
The dash array pattern of the stroke (e.g. "5, 5"), or null for a solid stroke, or "same" to use the value of the normal state.
- Default:
"same" - Validation:
should be a valid dash array or be one of [ null, "same" ]
tickLabel.textStyle.defocused.strokeOpacity
The opacity (0 - 1) of the stroke.
- Default:
0.5 - Validation:
should be a number >= to 0 and <= 1
tickLabel.textStyle.defocused.strokeWidth
The width (in pixels) of the stroke, or null to leave the svg stroke-width attribute unset, or "same" to use the value of the normal state.
- Default:
0 - Validation:
should be a number >= to 0 or be one of [ null, "same" ]
tickLabel.textStyle.focused
The style of the axis tick label text, while the axis is focused.
- Default:
{ strokeColor: "same", strokeOpacity: 1, strokeWidth: 0, strokeDashArray: "same", fillColor: "same", fillOpacity: 1 } - Validation: should be an object with any of the properties {
fillColor,fillOpacity,strokeColor,strokeDashArray,strokeOpacity,strokeWidth}
tickLabel.textStyle.focused.fillColor
The color of the fill: use "none" to switch the fill off, or "currentColor" to follow the host page's css color, or "same" to use the color of the normal state.
- Default:
"same" - Validation:
should be a valid svg color (or "none" / "currentColor") or be equal to "same"
tickLabel.textStyle.focused.fillOpacity
The opacity (0 - 1) of the fill.
- Default:
1 - Validation:
should be a number >= to 0 and <= 1
tickLabel.textStyle.focused.strokeColor
The color of the stroke (outline): use "none" to switch the stroke off, or "currentColor" to follow the host page's css color, or "same" to use the color of the normal state.
- Default:
"same" - Validation:
should be a valid svg color (or "none" / "currentColor") or be equal to "same"
tickLabel.textStyle.focused.strokeDashArray
The dash array pattern of the stroke (e.g. "5, 5"), or null for a solid stroke, or "same" to use the value of the normal state.
- Default:
"same" - Validation:
should be a valid dash array or be one of [ null, "same" ]
tickLabel.textStyle.focused.strokeOpacity
The opacity (0 - 1) of the stroke.
- Default:
1 - Validation:
should be a number >= to 0 and <= 1
tickLabel.textStyle.focused.strokeWidth
The width (in pixels) of the stroke, or null to leave the svg stroke-width attribute unset, or "same" to use the value of the normal state.
- Default:
0 - Validation:
should be a number >= to 0 or be one of [ null, "same" ]
tickLabel.textStyle.normal
The style of the axis tick label text, while the axis is neither focused nor defocused.
- Default:
{ strokeColor: "none", strokeOpacity: 1, strokeWidth: 0, strokeDashArray: null, fillColor: "currentColor", fillOpacity: 1 } - Validation: should be an object with any of the properties {
fillColor,fillOpacity,strokeColor,strokeDashArray,strokeOpacity,strokeWidth} - Used in: Fewer ticks instead
tickLabel.textStyle.normal.fillColor
The color of the fill: use "none" to switch the fill off, or "currentColor" to follow the host page's css color.
- Default:
"currentColor" - Validation:
should be a valid svg color (or "none" / "currentColor")
tickLabel.textStyle.normal.fillOpacity
The opacity (0 - 1) of the fill.
- Default:
1 - Validation:
should be a number >= to 0 and <= 1 - Used in: Fewer ticks instead
tickLabel.textStyle.normal.strokeColor
The color of the stroke (outline): use "none" to switch the stroke off, or "currentColor" to follow the host page's css color.
- Default:
"none" - Validation:
should be a valid svg color (or "none" / "currentColor")
tickLabel.textStyle.normal.strokeDashArray
The dash array pattern of the stroke (e.g. "5, 5"), or null for a solid stroke.
- Default:
null - Validation:
should be a valid dash array or be equal to null
tickLabel.textStyle.normal.strokeOpacity
The opacity (0 - 1) of the stroke.
- Default:
1 - Validation:
should be a number >= to 0 and <= 1
tickLabel.textStyle.normal.strokeWidth
The width (in pixels) of the stroke, or null to leave the svg stroke-width attribute unset.
- Default:
0 - Validation:
should be a number >= to 0 or be equal to null
tickLabel.truncation
The truncation applied to the axis tick labels when they would overlap each other.
- Default:
{ text: "…", tooltipEnabled: true, minLength: 0, maxFraction: 0.2 } - Validation: should be an object with any of the properties {
enabled,maxFraction,minLength,text,tooltipEnabled} - Used in: Tick labels · Truncated Text
tickLabel.truncation.enabled
Whether or not to use text truncation (true) when the axis tick labels would overlap each other instead of skipping ticks (false).
- Default:
true— when type is stringfalse— when type is not string
- Validation:
should be equal to false when scale is linear;should be a boolean - Used in: Tick labels · Truncated Text
tickLabel.truncation.maxFraction
The maximum fraction (0 - 1) of the plot bounds to allow any tick label text to occupy when they are perpendicular to the axis.
- Default:
0.2 - Validation:
should be a number >= to 0 and <= 1 - Used in: Tick labels · Truncated Text
tickLabel.truncation.minLength
The minimum length (in pixels) to allow tick label text perpendicular to the axis, applied when maxFraction would allow less.
- Default:
0 - Validation:
should be a number >= to 0 - Used in: Tick labels
tickLabel.truncation.text
The truncation text to append when text is truncated.
- Default:
"…" - Validation:
should be a string - Used in: Tick labels · Truncated Text
tickLabel.truncation.tooltipEnabled
Whether truncated text shows its full string as the browser’s native tooltip while a pointer rests on it.
When true, a truncated tick label carries an svg <title> holding the full text, which browsers show as their native tooltip (not the chart tooltip) while a mouse or pen rests on it. Touch has no hover, so nothing shows there; assistive tech already gets the full text through aria-label.
- Default:
true - Validation:
should be a boolean
tickMark
The tick marks drawn perpendicular to the axis at each tick value.
- Default:
{ visible: true, front: false, size: 3, marginInner: 0, style: { … } } - Validation: should be an object with any of the properties {
front,marginInner,size,style,visible}
tickMark.front
Whether the axis tick marks should be shown in front (true) or behind (false) the series shapes.
- Default:
false - Validation:
should be a boolean
tickMark.marginInner
The margin (in pixels) to show between the inside of the axis and the axis tick mark lines.
- Default:
0 - Validation:
should be a number >= to 0
tickMark.size
The length (in pixels) of the axis tick mark lines.
- Default:
3 - Validation:
should be a number >= to 0
tickMark.style
The style of the axis tick mark lines.
- Default:
{ normal: { … }, focused: { … }, defocused: { … } } - Validation: should be an object with any of the properties {
defocused,focused,normal}
tickMark.style.defocused
The style of the axis tick mark lines, while the axis is defocused.
- Default:
{ strokeColor: "same", strokeOpacity: 0.325, strokeWidth: "same", strokeDashArray: "same" } - Validation: should be an object with any of the properties {
strokeColor,strokeDashArray,strokeOpacity,strokeWidth}
tickMark.style.defocused.strokeColor
The color of the stroke (outline): use "none" to switch the stroke off, or "currentColor" to follow the host page's css color, or "same" to use the color of the normal state.
- Default:
"same" - Validation:
should be a valid svg color (or "none" / "currentColor") or be equal to "same"
tickMark.style.defocused.strokeDashArray
The dash array pattern of the stroke (e.g. "5, 5"), or null for a solid stroke, or "same" to use the value of the normal state.
- Default:
"same" - Validation:
should be a valid dash array or be one of [ null, "same" ]
tickMark.style.defocused.strokeOpacity
The opacity (0 - 1) of the stroke.
- Default:
0.325 - Validation:
should be a number >= to 0 and <= 1
tickMark.style.defocused.strokeWidth
The width (in pixels) of the stroke, or null to leave the svg stroke-width attribute unset, or "same" to use the value of the normal state.
- Default:
"same" - Validation:
should be a number >= to 0 or be one of [ null, "same" ]
tickMark.style.focused
The style of the axis tick mark lines, while the axis is focused.
- Default:
{ strokeColor: "same", strokeOpacity: 0.65, strokeWidth: "same", strokeDashArray: "same" } - Validation: should be an object with any of the properties {
strokeColor,strokeDashArray,strokeOpacity,strokeWidth}
tickMark.style.focused.strokeColor
The color of the stroke (outline): use "none" to switch the stroke off, or "currentColor" to follow the host page's css color, or "same" to use the color of the normal state.
- Default:
"same" - Validation:
should be a valid svg color (or "none" / "currentColor") or be equal to "same"
tickMark.style.focused.strokeDashArray
The dash array pattern of the stroke (e.g. "5, 5"), or null for a solid stroke, or "same" to use the value of the normal state.
- Default:
"same" - Validation:
should be a valid dash array or be one of [ null, "same" ]
tickMark.style.focused.strokeOpacity
The opacity (0 - 1) of the stroke.
- Default:
0.65 - Validation:
should be a number >= to 0 and <= 1
tickMark.style.focused.strokeWidth
The width (in pixels) of the stroke, or null to leave the svg stroke-width attribute unset, or "same" to use the value of the normal state.
- Default:
"same" - Validation:
should be a number >= to 0 or be one of [ null, "same" ]
tickMark.style.normal
The style of the axis tick mark lines, while the axis is neither focused nor defocused.
- Default:
{ strokeColor: "currentColor", strokeOpacity: 0.65, strokeWidth: 1, strokeDashArray: null } - Validation: should be an object with any of the properties {
strokeColor,strokeDashArray,strokeOpacity,strokeWidth}
tickMark.style.normal.strokeColor
The color of the stroke (outline): use "none" to switch the stroke off, or "currentColor" to follow the host page's css color.
- Default:
"currentColor" - Validation:
should be a valid svg color (or "none" / "currentColor")
tickMark.style.normal.strokeDashArray
The dash array pattern of the stroke (e.g. "5, 5"), or null for a solid stroke.
- Default:
null - Validation:
should be a valid dash array or be equal to null
tickMark.style.normal.strokeOpacity
The opacity (0 - 1) of the stroke.
- Default:
0.65 - Validation:
should be a number >= to 0 and <= 1
tickMark.style.normal.strokeWidth
The width (in pixels) of the stroke, or null to leave the svg stroke-width attribute unset.
- Default:
1 - Validation:
should be a number >= to 0 or be equal to null
tickMark.visible
Whether to show lines perpendicular to each tick value along the axis.
- Default:
true - Validation:
should be a boolean
title
The title shown alongside the axis.
- Default:
{ text: null, front: false, backgroundStyle: { … }, truncation: { … }, size: "auto", marginInner: 2, marginOuter: 2, paddingInner: 3, paddingOuter: 3, textStyle: { … } } - Validation: should be an object with any of the properties {
backgroundStyle,front,marginInner,marginOuter,paddingInner,paddingOuter,size,text,textStyle,truncation} - Used in: Histogram · Curves · Scatter and bubble · Multiple Axes · Truncated Text · Rotated Ticks · +8 more
title.backgroundStyle
The styles to apply to the axis title background (strokeColor, strokeOpacity, strokeWidth, fillColor, fillOpacity (use null for none)).
- Default:
{ strokeColor: "currentColor", strokeOpacity: 0, strokeWidth: null, strokeDashArray: null, fillColor: null, fillOpacity: 0 } - Validation: should be an object with any of the properties {
fillColor,fillOpacity,strokeColor,strokeDashArray,strokeOpacity,strokeWidth}
title.backgroundStyle.fillColor
The color of the fill: use null to leave the svg fill attribute unset so that css can supply it, "none" to switch the fill off, or "currentColor" to follow the host page's css color.
- Default:
null - Validation:
should be a valid svg color (or "none" / "currentColor") or be equal to null
title.backgroundStyle.fillOpacity
The opacity (0 - 1) of the fill, or null to leave the svg fill-opacity attribute unset.
- Default:
0 - Validation:
should be a number >= to 0 and <= 1 or be equal to null
title.backgroundStyle.strokeColor
The color of the stroke (outline): use null to leave the svg stroke attribute unset so that css can supply it, "none" to switch the stroke off, or "currentColor" to follow the host page's css color.
- Default:
"currentColor" - Validation:
should be a valid svg color (or "none" / "currentColor") or be equal to null
title.backgroundStyle.strokeDashArray
The dash array pattern of the stroke (e.g. "5, 5"), or null for a solid stroke.
- Default:
null - Validation:
should be a valid dash array or be equal to null
title.backgroundStyle.strokeOpacity
The opacity (0 - 1) of the stroke, or null to leave the svg stroke-opacity attribute unset.
- Default:
0 - Validation:
should be a number >= to 0 and <= 1 or be equal to null
title.backgroundStyle.strokeWidth
The width (in pixels) of the stroke, or null to leave the svg stroke-width attribute unset.
- Default:
null - Validation:
should be a number >= to 0 or be equal to null
title.front
Whether the axis title should be shown in front (true) or behind (false) the series shapes.
- Default:
false - Validation:
should be a boolean
title.marginInner
The margin (in pixels) to show between the axis title and the inside of the axis.
- Default:
2 - Validation:
should be a number >= to 0
title.marginOuter
The margin (in pixels) to show between the axis title and the outside of the axis.
- Default:
2 - Validation:
should be a number >= to 0
title.paddingInner
The padding (in pixels) to show between the axis title and the inside of the axis.
- Default:
3 - Validation:
should be a number >= to 0
title.paddingOuter
The padding (in pixels) to show between the axis title and the outside of the axis.
- Default:
3 - Validation:
should be a number >= to 0
title.size
The space (in pixels) perpendicular to the axis direction to allocate for the axis title (use "auto" to derive from the font size).
- Default:
"auto" - Validation:
should be a number >= to 0 or be equal to "auto"
title.text
The title text to be shown alongside the axis (use null for no title).
- Default:
null - Validation:
should be a string or be equal to null - Used in: Histogram · Curves · Scatter and bubble · Multiple Axes · Truncated Text · Rotated Ticks · +8 more
title.textStyle
The style of the axis title text.
- Default:
{ normal: { … }, focused: { … }, defocused: { … } } - Validation: should be an object with any of the properties {
defocused,focused,normal}
title.textStyle.defocused
The style of the axis title text, while the axis is defocused.
- Default:
{ strokeColor: "same", strokeOpacity: 0.5, strokeWidth: 0, strokeDashArray: "same", fillColor: "same", fillOpacity: 0.5 } - Validation: should be an object with any of the properties {
fillColor,fillOpacity,strokeColor,strokeDashArray,strokeOpacity,strokeWidth}
title.textStyle.defocused.fillColor
The color of the fill: use "none" to switch the fill off, or "currentColor" to follow the host page's css color, or "same" to use the color of the normal state.
- Default:
"same" - Validation:
should be a valid svg color (or "none" / "currentColor") or be equal to "same"
title.textStyle.defocused.fillOpacity
The opacity (0 - 1) of the fill.
- Default:
0.5 - Validation:
should be a number >= to 0 and <= 1
title.textStyle.defocused.strokeColor
The color of the stroke (outline): use "none" to switch the stroke off, or "currentColor" to follow the host page's css color, or "same" to use the color of the normal state.
- Default:
"same" - Validation:
should be a valid svg color (or "none" / "currentColor") or be equal to "same"
title.textStyle.defocused.strokeDashArray
The dash array pattern of the stroke (e.g. "5, 5"), or null for a solid stroke, or "same" to use the value of the normal state.
- Default:
"same" - Validation:
should be a valid dash array or be one of [ null, "same" ]
title.textStyle.defocused.strokeOpacity
The opacity (0 - 1) of the stroke.
- Default:
0.5 - Validation:
should be a number >= to 0 and <= 1
title.textStyle.defocused.strokeWidth
The width (in pixels) of the stroke, or null to leave the svg stroke-width attribute unset, or "same" to use the value of the normal state.
- Default:
0 - Validation:
should be a number >= to 0 or be one of [ null, "same" ]
title.textStyle.focused
The style of the axis title text, while the axis is focused.
- Default:
{ strokeColor: "same", strokeOpacity: 1, strokeWidth: 0, strokeDashArray: "same", fillColor: "same", fillOpacity: 1 } - Validation: should be an object with any of the properties {
fillColor,fillOpacity,strokeColor,strokeDashArray,strokeOpacity,strokeWidth}
title.textStyle.focused.fillColor
The color of the fill: use "none" to switch the fill off, or "currentColor" to follow the host page's css color, or "same" to use the color of the normal state.
- Default:
"same" - Validation:
should be a valid svg color (or "none" / "currentColor") or be equal to "same"
title.textStyle.focused.fillOpacity
The opacity (0 - 1) of the fill.
- Default:
1 - Validation:
should be a number >= to 0 and <= 1
title.textStyle.focused.strokeColor
The color of the stroke (outline): use "none" to switch the stroke off, or "currentColor" to follow the host page's css color, or "same" to use the color of the normal state.
- Default:
"same" - Validation:
should be a valid svg color (or "none" / "currentColor") or be equal to "same"
title.textStyle.focused.strokeDashArray
The dash array pattern of the stroke (e.g. "5, 5"), or null for a solid stroke, or "same" to use the value of the normal state.
- Default:
"same" - Validation:
should be a valid dash array or be one of [ null, "same" ]
title.textStyle.focused.strokeOpacity
The opacity (0 - 1) of the stroke.
- Default:
1 - Validation:
should be a number >= to 0 and <= 1
title.textStyle.focused.strokeWidth
The width (in pixels) of the stroke, or null to leave the svg stroke-width attribute unset, or "same" to use the value of the normal state.
- Default:
0 - Validation:
should be a number >= to 0 or be one of [ null, "same" ]
title.textStyle.normal
The style of the axis title text, while the axis is neither focused nor defocused.
- Default:
{ strokeColor: "none", strokeOpacity: 1, strokeWidth: 0, strokeDashArray: null, fillColor: "currentColor", fillOpacity: 1 } - Validation: should be an object with any of the properties {
fillColor,fillOpacity,strokeColor,strokeDashArray,strokeOpacity,strokeWidth}
title.textStyle.normal.fillColor
The color of the fill: use "none" to switch the fill off, or "currentColor" to follow the host page's css color.
- Default:
"currentColor" - Validation:
should be a valid svg color (or "none" / "currentColor")
title.textStyle.normal.fillOpacity
The opacity (0 - 1) of the fill.
- Default:
1 - Validation:
should be a number >= to 0 and <= 1
title.textStyle.normal.strokeColor
The color of the stroke (outline): use "none" to switch the stroke off, or "currentColor" to follow the host page's css color.
- Default:
"none" - Validation:
should be a valid svg color (or "none" / "currentColor")
title.textStyle.normal.strokeDashArray
The dash array pattern of the stroke (e.g. "5, 5"), or null for a solid stroke.
- Default:
null - Validation:
should be a valid dash array or be equal to null
title.textStyle.normal.strokeOpacity
The opacity (0 - 1) of the stroke.
- Default:
1 - Validation:
should be a number >= to 0 and <= 1
title.textStyle.normal.strokeWidth
The width (in pixels) of the stroke, or null to leave the svg stroke-width attribute unset.
- Default:
0 - Validation:
should be a number >= to 0 or be equal to null
title.truncation
The truncation applied to the axis title when it would overflow the axis bounds.
- Default:
{ enabled: true, text: "…", tooltipEnabled: true } - Validation: should be an object with any of the properties {
enabled,text,tooltipEnabled} - Used in: Truncated Text
title.truncation.enabled
Whether to apply text truncation to the contents of the axis title when it would overflow the axis bounds.
- Default:
true - Validation:
should be a boolean - Used in: Truncated Text
title.truncation.text
The truncation text to append when text is truncated.
- Default:
"…" - Validation:
should be a string - Used in: Truncated Text
title.truncation.tooltipEnabled
Whether truncated text shows its full string as the browser’s native tooltip while a pointer rests on it.
When true, a truncated axis title carries an svg <title> holding the full text, which browsers show as their native tooltip (not the chart tooltip) while a mouse or pen rests on it. Touch has no hover, so nothing shows there; the axis group is already named from the full title.
- Default:
true - Validation:
should be a boolean
type
The type of the category values (number, date, string).
How category values are interpreted: string for labels, number for numeric values, and date for date values (dateUTC controls their timezone handling). The type drives parsing, tick label formatting, and which scale options make sense.
- Default:
"string" - Validation:
should be one of [ "number", "date", "string" ] - Used in: Home · Getting started · Staged animation · Stacked · Grouped · Grouped Across Axes · +58 more
valueFormat
The d3 format string (d3-format for number, d3-time-format for date) to be applied to the category value when displayed in the tooltip (use null for none, use "auto" to derive from data).
- Default:
"auto" - Validation:
should be one of [ null, "auto" ] when type is string;should be a valid date format or be one of [ null, "auto" ] when type is date;should be a valid number format or be one of [ null, "auto" ] when type is number - Used in: Tooltip formatting · Picket Fence Bars · Patterns
valueLabel
The label to show before a category value in the tooltip (use null for none).
- Default:
null - Validation:
should be a string or be equal to null - Used in: Stacked · Grouped · Grouped Across Axes · +25 more
valuePrefix
The text to prefix category values with when showing them in the tooltip (use null for none).
- Default:
null - Validation:
should be a string or be equal to null
valueSuffix
The text to append category values with when showing them in the tooltip (use null for none).
- Default:
null - Validation:
should be a string or be equal to null
visible
Whether the axis should be visible (its line, tick marks, tick labels and title). Its grid, base and threshold lines are controlled by their own visibility properties, and can remain visible when the axis is hidden.
- Default:
false— when chart.type is pietrue— when chart.type is xy
- Validation:
should be equal to false when chart type is not xy;should be a boolean when chart type is xy - Used in: Sparklines