mochart

Title Config ​

Configure the chart title.

Every property is optional and falls back to its default. Property anchors are stable: link to any entry as #title.propertyName, and to a member of a nested property as #title.propertyName.memberName.

align ​

The alignment for the title (left, center, right).

  • Default: "center"
  • Validation: should be one of [ "left", "center", "right" ]
  • Used in: Chart title

alignedToAxes ​

Whether the title should be aligned between the axes (true) or the chart bounds (false).

  • Default: true
  • Validation: should be a boolean
  • Used in: Chart title

backgroundStyle ​

The styles to apply to the title background (strokeColor, strokeOpacity, strokeWidth, fillColor, fillOpacity (use null for none)).

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
  • Used in: Chart title · Truncated Text

backgroundStyle.fillOpacity ​

The opacity (0 - 1) of the fill, or null to leave the svg fill-opacity attribute unset.

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
  • Used in: Chart title · Truncated Text

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.

backgroundStyle.strokeWidth ​

The width (in pixels) of the stroke, or null to leave the svg stroke-width attribute unset.

font ​

The font of the title text (family, size, weight, style), each member falling back to chart.font when null.

  • Default: { family: null, size: null, weight: null, style: null }
  • Validation: should be an object with any of the properties { family, size, style, weight }
  • Used in: Typography · Font

font.family ​

The css font-family of the text, or null to leave the font family to css.

  • Default: null
  • Validation: should be a css font-family string with at least one character other than whitespace or be equal to null

font.size ​

The font size of the text, as a number of pixels or any css font-size string (a length with a unit, a percentage, a size keyword, or a calc/clamp/min/max/var function), or null to leave the font size to css.

  • Default: null
  • Validation: should be a number of pixels greater than 0, or a css font-size string (a length above 0 with a unit, a percentage, a size keyword, or a calc/clamp/min/max/var function) or be equal to null
  • Used in: Typography · Font

font.style ​

The css font-style of the text ("normal", "italic", "oblique"), or null to leave the font style to css.

  • Default: null
  • Validation: should be one of [ "normal", "italic", "oblique" ] or be equal to null

font.weight ​

The css font-weight of the text (100 to 900 in hundreds, or "normal", "bold", "lighter", "bolder"), or null to leave the font weight to css.

  • Default: null
  • Validation: should be one of [ 100, 200, 300, 400, 500, 600, 700, 800, 900, "normal", "bold", "lighter", "bolder" ] or be equal to null
  • Used in: Typography · Font

The link to create for the title (use null for none).

linkDisabled ​

Whether to prevent default navigation behaviour when the link is clicked.

margin ​

The margin (in pixels) for the top, right, bottom and left sides of the title.

margin.bottom ​

The space (in pixels) along the bottom edge.

margin.left ​

The space (in pixels) along the left edge.

margin.right ​

The space (in pixels) along the right edge.

margin.top ​

The space (in pixels) along the top edge.

padding ​

The padding (in pixels) for the top, right, bottom and left sides of the title.

padding.bottom ​

The space (in pixels) along the bottom edge.

padding.left ​

The space (in pixels) along the left edge.

padding.right ​

The space (in pixels) along the right edge.

padding.top ​

The space (in pixels) along the top edge.

position ​

The position of the title relative to the chart (top or bottom).

prefix ​

The prefix box shown at the start of the title.

prefix.backgroundStyle ​

The styles to apply to the box background (strokeColor, strokeOpacity, strokeWidth, fillColor, fillOpacity (use null for none)).

prefix.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
  • Used in: Chart title · Truncated Text

prefix.backgroundStyle.fillOpacity ​

The opacity (0 - 1) of the fill, or null to leave the svg fill-opacity attribute unset.

prefix.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
  • Used in: Truncated Text

prefix.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

prefix.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
  • Used in: Truncated Text

prefix.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
  • Used in: Truncated Text

prefix.font ​

The font of the box text (family, size, weight, style), each member falling back to chart.font when null.

  • Default: { family: null, size: null, weight: null, style: null }
  • Validation: should be an object with any of the properties { family, size, style, weight }

prefix.font.family ​

The css font-family of the text, or null to leave the font family to css.

  • Default: null
  • Validation: should be a css font-family string with at least one character other than whitespace or be equal to null

prefix.font.size ​

The font size of the text, as a number of pixels or any css font-size string (a length with a unit, a percentage, a size keyword, or a calc/clamp/min/max/var function), or null to leave the font size to css.

  • Default: null
  • Validation: should be a number of pixels greater than 0, or a css font-size string (a length above 0 with a unit, a percentage, a size keyword, or a calc/clamp/min/max/var function) or be equal to null

prefix.font.style ​

The css font-style of the text ("normal", "italic", "oblique"), or null to leave the font style to css.

  • Default: null
  • Validation: should be one of [ "normal", "italic", "oblique" ] or be equal to null

prefix.font.weight ​

The css font-weight of the text (100 to 900 in hundreds, or "normal", "bold", "lighter", "bolder"), or null to leave the font weight to css.

  • Default: null
  • Validation: should be one of [ 100, 200, 300, 400, 500, 600, 700, 800, 900, "normal", "bold", "lighter", "bolder" ] or be equal to null

prefix.margin ​

The margin (in pixels) for the top, right, bottom and left sides of the box.

prefix.margin.bottom ​

The space (in pixels) along the bottom edge.

  • Default: 0
  • Validation: should be a number >= to 0
  • Used in: Truncated Text

prefix.margin.left ​

The space (in pixels) along the left edge.

  • Default: 0
  • Validation: should be a number >= to 0
  • Used in: Truncated Text

prefix.margin.right ​

The space (in pixels) along the right edge.

  • Default: 5
  • Validation: should be a number >= to 0
  • Used in: Truncated Text

prefix.margin.top ​

The space (in pixels) along the top edge.

  • Default: 0
  • Validation: should be a number >= to 0
  • Used in: Truncated Text

prefix.padding ​

The padding (in pixels) for the top, right, bottom and left sides of the box.

prefix.padding.bottom ​

The space (in pixels) along the bottom edge.

prefix.padding.left ​

The space (in pixels) along the left edge.

prefix.padding.right ​

The space (in pixels) along the right edge.

prefix.padding.top ​

The space (in pixels) along the top edge.

prefix.text ​

The text to display in the box (use null or an empty string for none).

prefix.textStyle ​

The styles to apply to the box text (strokeColor, strokeOpacity, strokeWidth, fillColor, fillOpacity (use null for none), use "currentColor" to follow the host page's css color and theme).

prefix.textStyle.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: "currentColor"
  • Validation: should be a valid svg color (or "none" / "currentColor") or be equal to null
  • Used in: Chart title

prefix.textStyle.fillOpacity ​

The opacity (0 - 1) of the fill, or null to leave the svg fill-opacity attribute unset.

  • Default: null
  • Validation: should be a number >= to 0 and <= 1 or be equal to null

prefix.textStyle.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: "none"
  • Validation: should be a valid svg color (or "none" / "currentColor") or be equal to null

prefix.textStyle.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

prefix.textStyle.strokeOpacity ​

The opacity (0 - 1) of the stroke, or null to leave the svg stroke-opacity attribute unset.

  • Default: null
  • Validation: should be a number >= to 0 and <= 1 or be equal to null

prefix.textStyle.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

suffix ​

The suffix box shown at the end of the title.

suffix.backgroundStyle ​

The styles to apply to the box background (strokeColor, strokeOpacity, strokeWidth, fillColor, fillOpacity (use null for none)).

suffix.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
  • Used in: Truncated Text

suffix.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
  • Used in: Truncated Text

suffix.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
  • Used in: Truncated Text

suffix.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

suffix.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
  • Used in: Truncated Text

suffix.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
  • Used in: Truncated Text

suffix.font ​

The font of the box text (family, size, weight, style), each member falling back to chart.font when null.

  • Default: { family: null, size: null, weight: null, style: null }
  • Validation: should be an object with any of the properties { family, size, style, weight }

suffix.font.family ​

The css font-family of the text, or null to leave the font family to css.

  • Default: null
  • Validation: should be a css font-family string with at least one character other than whitespace or be equal to null

suffix.font.size ​

The font size of the text, as a number of pixels or any css font-size string (a length with a unit, a percentage, a size keyword, or a calc/clamp/min/max/var function), or null to leave the font size to css.

  • Default: null
  • Validation: should be a number of pixels greater than 0, or a css font-size string (a length above 0 with a unit, a percentage, a size keyword, or a calc/clamp/min/max/var function) or be equal to null

suffix.font.style ​

The css font-style of the text ("normal", "italic", "oblique"), or null to leave the font style to css.

  • Default: null
  • Validation: should be one of [ "normal", "italic", "oblique" ] or be equal to null

suffix.font.weight ​

The css font-weight of the text (100 to 900 in hundreds, or "normal", "bold", "lighter", "bolder"), or null to leave the font weight to css.

  • Default: null
  • Validation: should be one of [ 100, 200, 300, 400, 500, 600, 700, 800, 900, "normal", "bold", "lighter", "bolder" ] or be equal to null

suffix.margin ​

The margin (in pixels) for the top, right, bottom and left sides of the box.

suffix.margin.bottom ​

The space (in pixels) along the bottom edge.

  • Default: 0
  • Validation: should be a number >= to 0
  • Used in: Truncated Text

suffix.margin.left ​

The space (in pixels) along the left edge.

  • Default: 5
  • Validation: should be a number >= to 0
  • Used in: Truncated Text

suffix.margin.right ​

The space (in pixels) along the right edge.

  • Default: 0
  • Validation: should be a number >= to 0
  • Used in: Truncated Text

suffix.margin.top ​

The space (in pixels) along the top edge.

  • Default: 0
  • Validation: should be a number >= to 0
  • Used in: Truncated Text

suffix.padding ​

The padding (in pixels) for the top, right, bottom and left sides of the box.

suffix.padding.bottom ​

The space (in pixels) along the bottom edge.

suffix.padding.left ​

The space (in pixels) along the left edge.

suffix.padding.right ​

The space (in pixels) along the right edge.

suffix.padding.top ​

The space (in pixels) along the top edge.

suffix.text ​

The text to display in the box (use null or an empty string for none).

suffix.textStyle ​

The styles to apply to the box text (strokeColor, strokeOpacity, strokeWidth, fillColor, fillOpacity (use null for none), use "currentColor" to follow the host page's css color and theme).

suffix.textStyle.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: "currentColor"
  • Validation: should be a valid svg color (or "none" / "currentColor") or be equal to null
  • Used in: Chart title

suffix.textStyle.fillOpacity ​

The opacity (0 - 1) of the fill, or null to leave the svg fill-opacity attribute unset.

  • Default: null
  • Validation: should be a number >= to 0 and <= 1 or be equal to null
  • Used in: Chart title

suffix.textStyle.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: "none"
  • Validation: should be a valid svg color (or "none" / "currentColor") or be equal to null

suffix.textStyle.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

suffix.textStyle.strokeOpacity ​

The opacity (0 - 1) of the stroke, or null to leave the svg stroke-opacity attribute unset.

  • Default: null
  • Validation: should be a number >= to 0 and <= 1 or be equal to null

suffix.textStyle.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

text ​

The text to display in the title (use null or an empty string for none).

textBackgroundStyle ​

The styles to apply to the title text background (strokeColor, strokeOpacity, strokeWidth, fillColor, fillOpacity (use null for none)).

textBackgroundStyle.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
  • Used in: Chart title · Truncated Text

textBackgroundStyle.fillOpacity ​

The opacity (0 - 1) of the fill, or null to leave the svg fill-opacity attribute unset.

textBackgroundStyle.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
  • Used in: Truncated Text

textBackgroundStyle.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

textBackgroundStyle.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
  • Used in: Truncated Text

textBackgroundStyle.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
  • Used in: Truncated Text

textMargin ​

The margin (in pixels) for the top, right, bottom and left sides of the title text.

textMargin.bottom ​

The space (in pixels) along the bottom edge.

textMargin.left ​

The space (in pixels) along the left edge.

textMargin.right ​

The space (in pixels) along the right edge.

textMargin.top ​

The space (in pixels) along the top edge.

textPadding ​

The padding (in pixels) for the top, right, bottom and left sides of the title text.

textPadding.bottom ​

The space (in pixels) along the bottom edge.

textPadding.left ​

The space (in pixels) along the left edge.

textPadding.right ​

The space (in pixels) along the right edge.

textPadding.top ​

The space (in pixels) along the top edge.

textStyle ​

The styles to apply to the title text (strokeColor, strokeOpacity, strokeWidth, fillColor, fillOpacity (use null for none), use "currentColor" to follow the host page's css color and theme).

textStyle.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: "currentColor"
  • Validation: should be a valid svg color (or "none" / "currentColor") or be equal to null
  • Used in: Chart title

textStyle.fillOpacity ​

The opacity (0 - 1) of the fill, or null to leave the svg fill-opacity attribute unset.

  • Default: null
  • Validation: should be a number >= to 0 and <= 1 or be equal to null
  • Used in: Chart title

textStyle.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: "none"
  • Validation: should be a valid svg color (or "none" / "currentColor") or be equal to null

textStyle.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

textStyle.strokeOpacity ​

The opacity (0 - 1) of the stroke, or null to leave the svg stroke-opacity attribute unset.

  • Default: null
  • Validation: should be a number >= to 0 and <= 1 or be equal to null

textStyle.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

truncation ​

The truncation applied to the title when its width exceeds the width of the chart.

truncation.enabled ​

Whether to use text truncation when the title width exceeds the width of the chart.

truncation.text ​

The truncation text to append when text is truncated.

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 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 chart's accessible name already uses the full text.

  • Default: true
  • Validation: should be a boolean

verticalAlign ​

The vertical alignment of the prefix/text/suffix within the title (top, middle, bottom).

verticalExpand ​

Whether to expand the padding height of the prefix/text/suffix to match the max section height.

  • Default: false
  • Validation: should be a boolean
  • Used in: Chart title

Released under the MIT License.