mochart

Appearance

Pie Config ​

Configure the pie/donut slice geometry and slice labels (applies when chart.type is pie).

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

centerLabel ​

The text label shown at the center of the pie (most useful for donut and gauge charts).

centerLabel.text ​

The text to show at the center of the pie (use null for none).

centerLabel.textStyle ​

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

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

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

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

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

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

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

centerOffsetXFraction ​

Offset the center label and total horizontally by this fraction (-1 to 1) of the outer radius (positive moves right).

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

centerOffsetYFraction ​

Offset the center label and total vertically by this fraction (-1 to 1) of the outer radius (positive moves down; e.g. use a negative value to lift them into a gauge's hole).

centerTotal ​

The total of the slice values shown at the center of the pie.

centerTotal.adjustForFiltering ​

Whether the center total counts only the unfiltered slices (true) or always shows the full total (false).

  • Default: true
  • Validation: should be a boolean

centerTotal.format ​

The d3 format specifier used to format the center total (use auto to derive a format).

centerTotal.textStyle ​

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

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

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

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

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

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

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

centerTotal.visible ​

Whether the total of the slice values should be shown at the center of the pie.

cornerRadius ​

The corner radius (in pixels) applied to the slice corners.

endAngle ​

The angle (in degrees, clockwise from the top) at which the last slice ends (use startAngle -90 and endAngle 90 for a half/gauge pie).

focusOffsetFraction ​

Offset the focused slice away from the center by this fraction (0 to 1) of the outer radius (an exploded slice); the layout reserves this room, so the slices shrink by the same fraction rather than leaving the plot when exploded.

innerRadiusFraction ​

The inner radius of the slices as a fraction (0 to 1) of the outer radius (use a value greater than 0 for a donut chart).

label ​

The labels drawn on the slices.

label.adjustForFiltering ​

Whether percent slice labels (and the minFraction threshold) renormalize against the unfiltered slices (true) or always use every slice's share of the full total (false).

  • Default: true
  • Validation: should be a boolean

label.minFraction ​

Hide the label of any slice whose value is smaller than this fraction (0 to 1) of the slice total.

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

label.percentFormat ​

The d3 format specifier used to format the percent part of the slice labels (use auto to derive a format).

  • Default: "auto"
  • Validation: should be a valid number format or be equal to "auto"

label.radiusFraction ​

The radial position of the slice labels as a fraction (0 to 1) between the inner radius and the outer radius.

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

label.type ​

The content of the slice labels: the slice value (value), the slice percentage of the total (percent), the series title (title), or a combination of two of them (valuePercent for "value (percent)", percentValue for "percent (value)", titleValue for "title: value", titlePercent for "title: percent").

  • Default: "percent"
  • Validation: should be one of [ "value", "percent", "title", "valuePercent", "percentValue", "titleValue", "titlePercent" ]
  • Used in: Donut and slice labels · Donut · Gauge

label.valueFormat ​

The d3 format specifier used to format the value part of the slice labels (use auto to derive a format).

  • Default: "auto"
  • Validation: should be a valid number format or be equal to "auto"

label.visible ​

Whether labels should be shown on the slices.

outerRadiusFraction ​

The outer radius of the slices as a fraction (0 to 1) of the largest radius that fits within the plot.

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

padAngle ​

The angle (in degrees) of the gap between adjacent slices.

startAngle ​

The angle (in degrees, clockwise from the top) at which the first slice starts.

tooltip ​

The values shown in the tooltip for the slices.

tooltip.percentFormat ​

The d3 format specifier used to format the percent part of the tooltip values (use auto to derive a format).

  • Default: "auto"
  • Validation: should be a valid number format or be equal to "auto"

tooltip.valueType ​

The content of the tooltip value for each slice: the slice value (value), the slice percentage of the total (percent) or a combination of both (valuePercent for "value (percent)", percentValue for "percent (value)"); the value part is formatted by the series valueFormat, valuePrefix and valueSuffix, and the percent part renormalizes against the unfiltered slices unless the top-level tooltip.adjustForFiltering is false.

  • Default: "value"
  • Validation: should be one of [ "value", "percent", "valuePercent", "percentValue" ]
  • Used in: Pie and donut · Pie · Donut · Gauge

Released under the MIT License.