Custom charts

Implemented Data Visualization

Custom ECharts options and trusted HTML tooltip templates.

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

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

Custom pie

Show template

{% load wdj %}
{% include 'wdj/components/chart.html' with option=chart_pie_option label='Custom request distribution' only %}

HTML tooltip template

Show template

{% load wdj %}
{% include 'wdj/components/chart.html' with option=audit_custom_tooltip_option label='HTML tooltip example' only %}

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