The <luna-sparkline> component displays inline charts for visualizing trends with multiple appearance modes and curve types.
Paths
/lunadom/components/sparkline/sparkline.js Basic Usage
Appearances
Trend Colors
Curve Types
With Data Points
Custom Colors & Sizes
Inline Text Usage
Our API response times
Customization
data - Space-separated numeric values to visualize. Minimum 2 values required.label - Descriptive label for accessibility (not visible, announced by screen readers).appearance - How the sparkline fills. Defaults to 'solid'.trend - Color theme based on data trend. Defaults to 'neutral'.curve - How data points connect. Defaults to 'linear'.size - The size of the sparkline. Defaults to 'md'.color - Custom color for the sparkline (overrides trend colors).show-dots - If present, shows dots at each data point.show-area - If present, fills the area under the line.min - Minimum value for the Y-axis scale. If not set, uses data minimum.max - Maximum value for the Y-axis scale. If not set, uses data maximum.--luna-sparkline-width - The width of the sparkline. Defaults to 100px.--luna-sparkline-height - The height of the sparkline. Defaults to 32px.--luna-sparkline-color - The color of the sparkline stroke and fill.--luna-sparkline-stroke-width - The width of the sparkline stroke.--luna-sparkline-opacity - The opacity of the filled area.luna-sparkline-render - Emitted when the sparkline is rendered.{ data: number[], min: number, max: number }