PhiaUi.Components.Data.ChartLayer (phia_ui v0.1.17)

Copy Markdown View Source

SVG grouping component with z-index convention for chart layering.

Inspired by Recharts' z-index layering — wraps chart elements in <g> groups with documentary z-values. SVG paints in DOM order, so the parent must sort layers by z-value before rendering.

Standard z-values (Recharts convention)

  • grid: -100
  • area: 100
  • bar: 300
  • line: 400
  • axis: 500
  • scatter: 600
  • label: 2000

Examples

<.chart_layer z={-100}>
  <%!-- grid lines --%>
</.chart_layer>

<.chart_layer z={400}>
  <%!-- line series --%>
</.chart_layer>

Summary

Functions

chart_layer(assigns)

Functions

chart_layer(assigns)

Attributes

  • z (:integer) - Documentary z-index value. SVG paints in DOM order. Defaults to 0.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)