Chart legend

Implemented Data Visualization

Large and compact legend items with loading states and real ECharts series toggles.

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

Large legend items

Show template

{% load wdj %}
{% include "wdj/components/chart.html" with id="audit-legend-large-chart" option=chart_multiple_lines_option label="Series with external legend" only %}{% include "wdj/components/chart_legend.html" with items=audit_legend_items target="audit-legend-large-chart" only %}

Small legend items

Show template

{% load wdj %}
{% include "wdj/components/chart.html" with id="audit-legend-small-chart" option=chart_multiple_lines_option label="Series with compact legend" only %}{% include "wdj/components/chart_legend.html" with items=audit_legend_items target="audit-legend-small-chart" compact=True only %}

Inactive and loading states

Show template

{% load wdj %}
{% include "wdj/components/chart_legend.html" with items=audit_legend_states only %}{% include "wdj/components/chart_legend.html" with items=audit_legend_states compact=True only %}

API Reference

Prop	Type	Default	Description
items	list[dict]	[]	Component-specific item dictionaries; see each rendered source example and integration context.
target	string	unset	Target; 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.
compact	bool	False	Compact; pass the documented value shown in the examples.
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