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.

  • Default: { enabled: true, text: "…", tooltipEnabled: true }
  • Validation: should be an object with any of the properties { enabled, text, tooltipEnabled }
  • Used in: Legend

truncation.enabled ​

Whether to use text truncation when a legend item width exceeds the width of the chart.

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

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.