mochart

Appearance

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.

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