Skip to content

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.

Properties

backgroundStyle

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

margin

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

  • Default: { top: 2, right: 2, bottom: 2, left: 2 }
  • 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: Sparklines · Truncated Text

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.

  • Default: { top: 3, right: 3, bottom: 3, left: 3 }
  • 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: Sparklines · Truncated Text

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

  • Default: "xy"
  • Validation: should be one of [ "xy", "pie" ]
  • Used in: Pie · Donut · Gauge

Released under the BSD-3-Clause License.