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.

Properties ​

align ​

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

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

alignedToAxes ​

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

  • Default: true
  • Validation: should be a boolean

backgroundStyle ​

The styles to apply to the legend 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 { strokeColor: should be a valid svg color (or "none" / "currentColor") or be equal to null, strokeOpacity: should be a number >= to 0 and <= 1 or be equal to null, fillColor: should be a valid svg color (or "none" / "currentColor") or be equal to null, fillOpacity: should be a number >= to 0 and <= 1 or be equal to null, strokeWidth: should be a number >= to 0 or be equal to null, strokeDashArray: should be a valid dash array or be equal to null }
  • Used in: Truncated Text

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

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

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

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: 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: 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 focusOnMouseOver). Combine with filterOnClick deliberately — with both enabled a click filters and focuses.

  • Default: false
  • Validation: should be a boolean

focusOnMouseOver ​

Whether to focus a series when the mouse is moved 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.

iconBorderColor ​

The color of the border drawn around series icons.

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

iconBorderOpacity ​

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

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

iconBorderSize ​

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

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

iconFilteredColor ​

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")

iconSize ​

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"

iconSpacerSize ​

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

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

iconUnfilteredColor ​

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")

itemBackgroundStyle ​

The styles to apply to the legend item backgrounds (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 { strokeColor: should be a valid svg color (or "none" / "currentColor") or be equal to null, strokeOpacity: should be a number >= to 0 and <= 1 or be equal to null, fillColor: should be a valid svg color (or "none" / "currentColor") or be equal to null, fillOpacity: should be a number >= to 0 and <= 1 or be equal to null, strokeWidth: should be a number >= to 0 or be equal to null, strokeDashArray: should be a valid dash array or be equal to null }
  • Used in: Truncated Text

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

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

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

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

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

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

itemMargin ​

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

  • Default: { top: 1, right: 1, bottom: 1, left: 1 }
  • Validation: should be an object with any of the properties { top: should be a number >= to 0, right: should be a number >= to 0, bottom: should be a number >= to 0, left: should be a number >= to 0 }
  • Used in: Truncated Text

itemMargin.bottom ​

The space (in pixels) along the bottom edge.

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

itemMargin.left ​

The space (in pixels) along the left edge.

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

itemMargin.right ​

The space (in pixels) along the right edge.

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

itemMargin.top ​

The space (in pixels) along the top edge.

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

itemPadding ​

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

  • Default: { top: 1, right: 1, bottom: 1, left: 1 }
  • Validation: should be an object with any of the properties { top: should be a number >= to 0, right: should be a number >= to 0, bottom: should be a number >= to 0, left: should be a number >= to 0 }
  • Used in: Truncated Text

itemPadding.bottom ​

The space (in pixels) along the bottom edge.

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

itemPadding.left ​

The space (in pixels) along the left edge.

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

itemPadding.right ​

The space (in pixels) along the right edge.

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

itemPadding.top ​

The space (in pixels) along the top edge.

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

itemTextStyle ​

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

  • Default: { strokeColor: "none", strokeOpacity: null, strokeWidth: 0, strokeDashArray: null, fillColor: "currentColor", fillOpacity: null }
  • Validation: should be an object with any of the properties { strokeColor: should be a valid svg color (or "none" / "currentColor") or be equal to null, strokeOpacity: should be a number >= to 0 and <= 1 or be equal to null, fillColor: should be a valid svg color (or "none" / "currentColor") or be equal to null, fillOpacity: should be a number >= to 0 and <= 1 or be equal to null, strokeWidth: should be a number >= to 0 or be equal to null, strokeDashArray: should be a valid dash array or be equal to null }

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

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

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

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

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

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

  • Default: { top: 5, right: 0, bottom: 0, left: 0 }
  • Validation: should be an object with any of the properties { top: should be a number >= to 0, right: should be a number >= to 0, bottom: should be a number >= to 0, left: should be a number >= to 0 }
  • Used in: Truncated Text

margin.bottom ​

The space (in pixels) along the bottom edge.

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

margin.left ​

The space (in pixels) along the left edge.

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

margin.right ​

The space (in pixels) along the right edge.

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

margin.top ​

The space (in pixels) along the top edge.

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

padding ​

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

  • Default: { top: 0, right: 0, bottom: 0, left: 0 }
  • Validation: should be an object with any of the properties { top: should be a number >= to 0, right: should be a number >= to 0, bottom: should be a number >= to 0, left: should be a number >= to 0 }
  • Used in: Truncated Text

padding.bottom ​

The space (in pixels) along the bottom edge.

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

padding.left ​

The space (in pixels) along the left edge.

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

padding.right ​

The space (in pixels) along the right edge.

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

padding.top ​

The space (in pixels) along the top edge.

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

position ​

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

  • Default: "bottom"
  • Validation: should be one of [ "top", "bottom" ]

showFilteringOnLabels ​

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

showIconColors ​

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

  • Default: true
  • Validation: should be a boolean

showIconPlaceholders ​

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

  • Default: true
  • Validation: should be a boolean

showIconShapes ​

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

  • Default: true
  • Validation: should be a boolean

truncationEnabled ​

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

  • Default: true
  • Validation: should be a boolean

truncationValue ​

The truncation text to append to legend item text when its length exceeds the length of the chart.

  • Default: "…"
  • Validation: should be a string

visible ​

Whether the legend should be visible.

Released under the BSD-3-Clause License.