Chart

Implemented Data Visualization

Server-built Apache ECharts (line, area, bar, donut) themed to wdj tokens.

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 %}
{% include "wdj/components/chart.html" with option=chart_line_option label="Requests and errors over time" height=300 %}

Area

Show template

{% load wdj %}
{% include "wdj/components/chart.html" with option=chart_area_option label="Bandwidth over time" height=300 %}

Stacked bars

Show template

{% load wdj %}
{% include "wdj/components/chart.html" with option=chart_bar_option label="Requests by status class" height=300 %}

Donut

Cache hit 62%
Cache miss 24%
Origin error 9%
Other 5%

Show template

{% load wdj %}
<div class="flex w-full flex-col items-center gap-4 sm:flex-row sm:justify-center">
  <div class="w-64 max-w-full">
    {% include "wdj/components/chart.html" with option=chart_donut_option label="Cache performance breakdown" height=240 %}
  </div>
  <ul class="flex flex-col gap-1 text-base">
    <li class="flex items-center gap-2"><span class="size-2.5 rounded-full" style="background:#2563eb"></span>Cache hit <span class="text-kumo-subtle">62%</span></li>
    <li class="flex items-center gap-2"><span class="size-2.5 rounded-full" style="background:#059669"></span>Cache miss <span class="text-kumo-subtle">24%</span></li>
    <li class="flex items-center gap-2"><span class="size-2.5 rounded-full" style="background:#d97706"></span>Origin error <span class="text-kumo-subtle">9%</span></li>
    <li class="flex items-center gap-2"><span class="size-2.5 rounded-full" style="background:#dc2626"></span>Other <span class="text-kumo-subtle">5%</span></li>
  </ul>
</div>

Loading

Show template

{% load wdj %}
{% include "wdj/components/chart.html" with loading=True label="Loading chart" height=300 %}

Stepped line

Show template

{% load wdj %}
<div class="w-full">{% include "wdj/components/chart.html" with option=chart_step_option label="Stepped line" only %}</div>

Stacked area

Show template

{% load wdj %}
<div class="w-full">{% include "wdj/components/chart.html" with option=chart_stacked_area_option label="Stacked area" only %}</div>

Category axis

Show template

{% load wdj %}
<div class="w-full">{% include "wdj/components/chart.html" with option=chart_category_option label="Category axis" only %}</div>

Threshold

Show template

{% load wdj %}
<div class="w-full">{% include "wdj/components/chart.html" with option=chart_threshold_option label="Threshold" only %}</div>

Zoom

Show template

{% load wdj %}
<div class="w-full">{% include "wdj/components/chart.html" with option=chart_zoom_option label="Zoom" only %}</div>

Grouped bars

Show template

{% load wdj %}
<div class="w-full">{% include "wdj/components/chart.html" with option=chart_grouped_bar_option label="Grouped bars" only %}</div>

Horizontal bars

Show template

{% load wdj %}
<div class="w-full">{% include "wdj/components/chart.html" with option=chart_horizontal_option label="Horizontal bars" only %}</div>

Pie

Show template

{% load wdj %}
<div class="w-full">{% include "wdj/components/chart.html" with option=chart_pie_option label="Pie" only %}</div>

Legend

Show template

{% load wdj %}
<div class="w-full">{% include "wdj/components/chart.html" with option=chart_legend_option label="Legend" only %}</div>

Nested donut

Show template

{% load wdj %}
<div class="w-full">{% include "wdj/components/chart.html" with option=chart_nested_option label="Nested donut" only %}</div>

Empty

No chart data

Data will appear when observations are available.

Show template

{% load wdj %}
<div class="w-full">{% include "wdj/components/chart.html" with option=chart_empty_option label="Empty" empty=True only %}</div>

Straight line

Show template

{% load wdj %}
<div class="w-full">{% include "wdj/components/chart.html" with option=chart_straight_option label="Straight line" only %}</div>

Visible points

Show template

{% load wdj %}
<div class="w-full">{% include "wdj/components/chart.html" with option=chart_points_option label="Visible points" only %}</div>

Missing values

Show template

{% load wdj %}
<div class="w-full">{% include "wdj/components/chart.html" with option=chart_gaps_option label="Missing values" only %}</div>

Multiple lines

Show template

{% load wdj %}
<div class="w-full">{% include "wdj/components/chart.html" with option=chart_multiple_lines_option label="Multiple lines" only %}</div>

Capacity bounds

Show template

{% load wdj %}
<div class="w-full">{% include "wdj/components/chart.html" with option=chart_bounds_option label="Capacity bounds" only %}</div>

Single bars

Show template

{% load wdj %}
<div class="w-full">{% include "wdj/components/chart.html" with option=chart_single_bars_option label="Single bars" only %}</div>

Zoom slider

Show template

{% load wdj %}
<div class="w-full">{% include "wdj/components/chart.html" with option=chart_zoom_slider_option label="Zoom slider" only %}</div>

Reference markers

Show template

{% load wdj %}
{% include "wdj/components/chart.html" with option=audit_chart_markers label="Requests with reference markers" only %}

Formatted axes and tooltip

Show template

{% load wdj %}
{% include "wdj/components/chart.html" with option=audit_chart_formats label="Formatted request counts" only %}

Gradient fill

Show template

{% load wdj %}
{% include "wdj/components/chart.html" with option=audit_chart_gradient label="Requests with gradient area" only %}

Incomplete interval

Show template

{% load wdj %}
{% include "wdj/components/chart.html" with option=audit_chart_incomplete label="Incomplete latest interval" only %}

Custom footer

Show template

{% load wdj %}
{% include "wdj/components/chart.html" with option=chart_multiple_lines_option label="Requests and cached responses" only %}<footer class="flex flex-wrap justify-between gap-2 text-base text-kumo-subtle"><span>Source: synthetic observations</span><span>Updated just now</span></footer>

Crosshair cursor

Show template

{% load wdj %}
{% include "wdj/components/chart.html" with option=audit_chart_crosshair label="Requests with crosshair" only %}

Legend toggle and highlight

Show template

{% load wdj %}
{% include "wdj/components/chart.html" with option=chart_multiple_lines_option label="Toggle series in the legend" 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