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

Minimal inline chart components for sparkline visualizations.

Inspired by Tremor's spark-elements. These are compact charts designed for inline use — no axes, no legend, no tooltip. Pure SVG rendering.

Components

spark_line_chart — mini line chart
spark_area_chart — mini area chart with gradient fill
spark_bar_chart — mini vertical bar chart

Examples

<.spark_line_chart data={[4, 7, 5, 10, 3, 8]} />
<.spark_area_chart data={[4, 7, 5, 10, 3, 8]} color="oklch(0.60 0.20 240)" />
<.spark_bar_chart data={[4, 7, 5, 10, 3, 8]} />

Summary

Functions

spark_area_chart(assigns)

Minimal area chart for inline sparkline use with gradient fill.

spark_bar_chart(assigns)

Minimal bar chart for inline sparkline use.

spark_line_chart(assigns)

Minimal line chart for inline sparkline use.

Functions

spark_area_chart(assigns)

Minimal area chart for inline sparkline use with gradient fill.

Attributes

data (:list) (required) - List of numeric values.
color (:string) - Fill/stroke color. Defaults to "oklch(0.60 0.20 240)".
curve (:atom) - Interpolation. Defaults to :linear. Must be one of :linear, :smooth, or :monotone.
show_gradient (:boolean) - Apply gradient fill. Defaults to true.
stroke_width (:any) - Stroke width. Defaults to 2.
show_animation (:boolean) - Enable fade animation. Defaults to false.
animate_duration (:integer) - Animation duration in ms. Defaults to 900.
class (:string) - Defaults to nil.
Global attributes are accepted.

spark_bar_chart(assigns)

Minimal bar chart for inline sparkline use.

Attributes

data (:list) (required) - List of numeric values.
color (:string) - Bar fill color. Defaults to "oklch(0.60 0.20 240)".
show_animation (:boolean) - Enable grow animation. Defaults to false.
animate_duration (:integer) - Animation duration in ms. Defaults to 900.
class (:string) - Defaults to nil.
Global attributes are accepted.

spark_line_chart(assigns)

Minimal line chart for inline sparkline use.

Attrs

data — list of numbers
color — line stroke color
curve — interpolation mode (:linear, :smooth, :monotone)
stroke_width — line width in px

Attributes

data (:list) (required) - List of numeric values.
color (:string) - Line stroke color. Defaults to "oklch(0.60 0.20 240)".
curve (:atom) - Interpolation. Defaults to :linear. Must be one of :linear, :smooth, or :monotone.
stroke_width (:any) - Stroke width. Defaults to 2.
show_animation (:boolean) - Enable draw animation. Defaults to false.
animate_duration (:integer) - Animation duration in ms. Defaults to 900.
class (:string) - Defaults to nil.
Global attributes are accepted.