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

Copy Markdown View Source

Flexible SVG text label component with 13 positioning modes.

Inspired by Recharts' <Label> — positions text relative to a bounding box using intuitive position atoms.

Examples

<.chart_label
  value="42"
  position={:top}
  x={100}
  y={50}
  width={80}
  height={30}
/>

<.chart_label value="Max" position={:inside_top_right} x={10} y={10} width={200} height={100} />

Summary

Functions

chart_label(assigns)

Functions

chart_label(assigns)

Attributes

  • value (:any) (required) - Label text content.
  • position (:atom) - Label position relative to the bounding box. Defaults to :top. Must be one of :top, :bottom, :left, :right, :center, :inside_top, :inside_bottom, :inside_left, :inside_right, :inside_top_left, :inside_top_right, :inside_bottom_left, or :inside_bottom_right.
  • x (:any) - Bounding box X origin. Defaults to 0.
  • y (:any) - Bounding box Y origin. Defaults to 0.
  • width (:any) - Bounding box width. Defaults to 0.
  • height (:any) - Bounding box height. Defaults to 0.
  • offset (:integer) - Offset from edge in px. Defaults to 5.
  • font_size (:string) - Font size for the label. Defaults to "9".
  • color (:string) - Fill color override. Defaults to nil.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.