mochart

Chart Config ​

Configure general settings of the chart.

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

backgroundStyle ​

The styles to apply to the chart 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.

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.

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.

font ​

The font of every text the chart draws, used for each member a part's own font leaves null (family, size, weight, style (use null to leave a member to css)).

Each text part (the title with its prefix and suffix, legend items, tick labels, axis titles, threshold titles, series labels, the pie center, the clip indicator label and the tooltip) has a font of its own with the same four members. A member is resolved per text element: the part's own value when it is not null, otherwise this chart-wide value, otherwise nothing. Resolved members are written as an inline style on the text element itself (font-family, font-size, font-weight, font-style), or for the clip indicator on its group, which its label inherits, so a configured value wins over any host page css rule; a member left null in both places writes nothing and stays with css. Text is measured after the font is written, so a larger size reserves more space in the layout. A size number is written in pixels; a string is written as given, so relative sizes ('0.85em', '120%', 'larger') resolve against the text's css font size as the browser sees it.

  • Default: { family: null, size: null, weight: null, style: null }
  • Validation: should be an object with any of the properties { family, size, style, weight }
  • Used in: Typography · Font

font.family ​

The css font-family of the text, or null to leave the font family to css.

  • Default: null
  • Validation: should be a css font-family string with at least one character other than whitespace or be equal to null
  • Used in: Typography · Font

font.size ​

The font size of the text, as a number of pixels or any css font-size string (a length with a unit, a percentage, a size keyword, or a calc/clamp/min/max/var function), or null to leave the font size to css.

  • Default: null
  • Validation: should be a number of pixels greater than 0, or a css font-size string (a length above 0 with a unit, a percentage, a size keyword, or a calc/clamp/min/max/var function) or be equal to null
  • Used in: Typography · Font

font.style ​

The css font-style of the text ("normal", "italic", "oblique"), or null to leave the font style to css.

  • Default: null
  • Validation: should be one of [ "normal", "italic", "oblique" ] or be equal to null

font.weight ​

The css font-weight of the text (100 to 900 in hundreds, or "normal", "bold", "lighter", "bolder"), or null to leave the font weight to css.

  • Default: null
  • Validation: should be one of [ 100, 200, 300, 400, 500, 600, 700, 800, 900, "normal", "bold", "lighter", "bolder" ] or be equal to null

margin ​

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

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

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.

type ​

The type of chart to render: an x/y plot with axes (xy) or a pie/donut chart (pie).

Released under the MIT License.