mochart

Appearance

Legend Config ​

Configure the chart legend which itemizes the series.

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

align ​

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

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

alignedToAxes ​

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

  • Default: true
  • Validation: should be a boolean
  • Used in: Legend

backgroundStyle ​

The styles to apply to the legend 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: Legend · Truncated Text

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: Legend · Truncated Text

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: Legend · 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.

  • Default: 0
  • Validation: should be a number >= to 0 and <= 1 or be equal to null
  • Used in: Legend · Truncated Text

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: Legend · Truncated Text

filterOnClick ​

Whether to filter a series when the series icon or title is clicked.

When true, clicking a legend item toggles its series out of (and back into) the chart, playing the staged series transition; the item stays in the legend so it can be restored. onSeriesFilter reports every change.

focusOnClick ​

Whether to focus a series when the series icon or title is clicked.

When true, clicking a legend item focuses its series (see focusOnHover). Combine with filterOnClick deliberately — with both enabled a click filters and focuses.

focusOnHover ​

Whether to focus a series when the pointer hovers over the series icon or title.

When true, hovering a legend item focuses its series: the series gets its focused styling and every other series gets its defocused styling. onFocus reports focus changes.

icon ​

The series icons shown next to the series titles in the legend.

icon.borderStyle ​

The border drawn around series icons.

icon.borderStyle.strokeColor ​

The color of the border drawn around series icons: use "none" to switch the border off, or "currentColor" to follow the host page's css color.

  • Default: "currentColor"
  • Validation: should be a valid svg color (or "none" / "currentColor")

icon.borderStyle.strokeOpacity ​

The opacity (0 - 1) of the border drawn around series icons.

icon.borderStyle.strokeWidth ​

The width (in pixels) of the border drawn around series icons.

  • Default: 1
  • Validation: should be a number >= to 0

icon.filteredColor ​

The color to use for the series icon when the corresponding series is filtered.

  • Default: rgba(255,255,255,0)
  • Validation: should be a valid svg color (or "none" / "currentColor")

icon.showColors ​

Whether to show series colors next to series titles in the legend.

  • Default: true
  • Validation: should be a boolean

icon.showPlaceholders ​

Whether to show placeholder icons next to the series titles in the legend.

  • Default: true
  • Validation: should be a boolean

icon.showShapes ​

Whether to show the series marker shape next to series titles in the legend.

  • Default: true
  • Validation: should be a boolean

icon.size ​

The width and height (in pixels) of the series icons, or "auto" to match the legend text font size.

  • Default: "auto"
  • Validation: should be a number >= to 0 or be equal to "auto"
  • Used in: Legend

icon.spacing ​

The horizontal space (in pixels) to show between series icons and titles.

  • Default: 4
  • Validation: should be a number >= to 0
  • Used in: Legend

icon.unfilteredColor ​

The color to use for the placeholder series icons when the corresponding series is not filtered.

  • Default: rgba(0,0,0,0.5)
  • Validation: should be a valid svg color (or "none" / "currentColor")

item ​

The legend items, each a series icon and title in its own box.

item.backgroundStyle ​

The styles to apply to the legend item backgrounds (strokeColor, strokeOpacity, strokeWidth, fillColor, fillOpacity (use null for none)).

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

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

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

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

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

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

item.margin ​

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

item.margin.bottom ​

The space (in pixels) along the bottom edge.

item.margin.left ​

The space (in pixels) along the left edge.

item.margin.right ​

The space (in pixels) along the right edge.

item.margin.top ​

The space (in pixels) along the top edge.

item.padding ​

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

item.padding.bottom ​

The space (in pixels) along the bottom edge.

item.padding.left ​

The space (in pixels) along the left edge.

item.padding.right ​

The space (in pixels) along the right edge.

item.padding.top ​

The space (in pixels) along the top edge.

item.textStyle ​

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

item.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: Legend

item.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: Legend

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

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

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

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

margin ​

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

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

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 legend relative to the chart (top or bottom).

strikeThroughFiltered ​

Whether to strike through the item text of filtered series.

When true, the item text of a series that has been filtered out of the chart is drawn with a line through it, so the legend shows at a glance which series are filtered. The strike-through covers the item text only, never its color icon — the icon already says the same thing by going hollow.

  • Default: false
  • Validation: should be a boolean
  • Used in: Legend

truncation ​

The truncation applied to legend item text when its width exceeds the width of the chart, or the width maxFraction allows one item.

truncation.enabled ​

Whether to use text truncation when a legend item width exceeds the width of the chart or the width maxFraction allows one item.

  • Default: true
  • Validation: should be a boolean
  • Used in: Legend

truncation.maxFraction ​

The maximum fraction (0 - 1) of the width available to the legend to allow any one legend item to occupy.

At the default 1 a single item may take the whole legend width, so a long title wraps onto a row of its own and the legend grows downward at the plot’s expense. A lower fraction limits every item to that share of the width available to the legend (the plot width when alignedToAxes is on) and truncates the titles that exceed it, so 0.5 fits two items to a row and a third fits three. The limit never takes an item below the accessibility.minTargetSize floor.

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

truncation.text ​

The truncation text to append when text is truncated.

  • Default: "…"
  • Validation: should be a string
  • Used in: Legend

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 legend item 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; a keyboard-reachable item is already named from the full series title.

  • Default: true
  • Validation: should be a boolean

visible ​

Whether the legend should be visible.

Released under the MIT License.