Skip to main content
brickwork
GitHub Log in Get started
Display
Theme
Density
Direction
Brand

Documentation

Sparkline

An inline SVG trend line with an accessible text summary.

All components Component Brickwork 4.3.1

Try it

Weekly revenue

Open full-page preview

Trend for a stat tile.

Revenue over the last seven days
Use for compact time-series context beside a metric.

Use it

Working invocation

This code creates the configuration shown above. Copy the template and the required Python context together.

templates/your_app/component.html

Django template

{% load brickwork_components %}
{% bw_sparkline points=revenue_points label=label %}

your_app/views.py

Python

context = {'revenue_points': [12, 18, 15, 22, 27, 25, 31], 'label': 'Revenue over the last seven days'}

Guide

Add it to your project

  1. Load `brickwork_components`.
  2. Call `bw_sparkline` with numeric `points` and a meaningful `label`.

View this component's source for the installed release

Options

Public API

Option Type Default Required Description
points list or tuple of numbers Not set Yes Data series. Constraint: Non-empty; maximum 400 points.
label string Not set Yes Accessible summary. Constraint: Use concise visible text that identifies the control or measurement.
value string Empty string No Visible formatted value. Constraint: Use the same type and scale expected by the receiving form or measurement.
tone string neutral No Line tone. Allowed: neutral, good, bad. Constraint: Allowed values: `neutral`, `good`, `bad`.
highlight_index integer Not set No Index of highlighted point. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component.
width number 100 No SVG viewBox width. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component.
height number 32 No SVG viewBox height. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component.
data mapping Not set No Consumer-owned data-* attributes. Constraint: Use the component's documented structured data shape; it is not a scalar visitor control.

Behaviour

Accessibility and responsive behaviour

Accessibility
The SVG is labelled by the supplied summary rather than relying on line colour or shape alone.
Responsive
Inline SVG scales in its container.
Without JavaScript
Static SVG data visualisation.

Need help?

Troubleshooting

Contract check: {% bw_sparkline %} tag, never a plain {% include %}: geometry (point

Use `{% bw_sparkline %}` so the tag shapes points and computes the geometry rather than passing an unprepared include context.

Documentation