Sparkline

Implemented Data Visualization

Compact line and bar charts for inline metrics.

Kumo reference: kumo-ui.com/charts/timeseries/

Presentation commands show demo feedback. Read the interaction guide to connect real actions.

Line

Show template

{% load wdj %}
<div class="w-full">{% include "wdj/components/chart.html" with option=sparkline_line_option label="Line trend" height=64 only %}</div>

Area

Show template

{% load wdj %}
<div class="w-full">{% include "wdj/components/chart.html" with option=sparkline_area_option label="Area trend" height=64 only %}</div>

Bars

Show template

{% load wdj %}
<div class="w-full">{% include "wdj/components/chart.html" with option=sparkline_bar_option label="Bars trend" height=64 only %}</div>

API Reference

Prop	Type	Default	Description
option	dict	unset	Option; pass the documented value shown in the examples.
height	number	288 (Chart)	Height; pass the documented value shown in the examples.
label	string	unset	Visible accessible label. Supply an explicit aria-label via attrs when the control is bare.
loading	bool	False	Loading; pass the documented value shown in the examples.
empty	bool	False	Empty; pass the documented value shown in the examples.
id	string	unset	Stable unique DOM ID; important for HTMX targets and focus restoration.
attrs	dict	{}	Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only.
class	string	""	Class; pass the documented value shown in the examples.

Accessibility notes

Every interactive component keeps real semantics and keyboard support: native controls where possible, ARIA only where necessary, and a visible focus ring. See the Accessibility page for the shared contract.

Read the accessibility contract