Chart card
Card chrome for a consumer-owned chart engine and its accessible data fallback.
Try it
Empty chart with transcript
A server-rendered empty chart state and a semantic data fallback.
Use it
Working invocation
This code creates the configuration shown above. Copy the template and the required Python context together.
{% load brickwork_components %}
{% bw_chart_data_table caption="Monthly sales" columns=chart_columns rows=chart_rows data_table_mode="hidden" as chart_table %}
{% include "brickwork/components/_chart_card.html" with title="Sales" empty=empty empty_body=empty_body data_table=chart_table %}context = {'chart_columns': ['Month', 'Sales'], 'chart_rows': [['January', '120'], ['February', '145']], 'empty': True, 'empty_body': 'No sales have been recorded.'}Guide
Add it to your project
- Include it with card options and chart state context.
- Render `bw_chart_mount` and `bw_chart_data_table` into variables when populated.
- Keep the fallback table as `data_table`, a sibling of the mount.
- Extend it for custom legend, mount, or table markup.
Options
Public API
| Option | Type | Default | Required | Description |
|---|---|---|---|---|
| surface | str | Not set | No | Inherited card fill treatment. Allowed: default, raised, tint, inverse, muted. Constraint: Use one of the documented surface choices; do not set a consumer CSS class as a substitute. |
| elevation | str | 1 | No | Inherited card shadow ladder. Allowed: 0, 1, 2, 3. Constraint: Allowed values: `0`, `1`, `2`, `3`. |
| size | str | Not set | No | Inherited card padding scale. Allowed: sm, md, lg. Constraint: Use one of the documented size choices; unsupported values are not a responsive substitute. |
| radius | str | Not set | No | Inherited card corner scale. Allowed: default, sm, lg, xl, none. Constraint: Allowed values: `default`, `sm`, `lg`, `xl`, `none`. |
| header_recipe | str | Not set | No | Inherited card header treatment. Allowed: none, plain, bordered, muted, inverse, accent. Constraint: Use `plain`, `muted`, or `bordered` only. |
| footer_recipe | str | Not set | No | Inherited card footer treatment. Allowed: none, plain, muted, actions. Constraint: Use `plain`, `muted`, or `actions` only. |
| media_recipe | str | Not set | No | Inherited card media treatment. Allowed: none, bleed, inset, icon. Constraint: Allowed values: `none`, `bleed`, `inset`, `icon`. |
| body | str | Not set | No | Inherited simple card body. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
| caption | str | Not set | No | Inherited simple card footer. Constraint: Describe the specimen when a visible figure caption adds context. |
| action_label | str | Not set | No | Inherited header action text. Constraint: Provide this only with its matching action URL and make the result clear. |
| action_href | str | Not set | No | Inherited header action URL. Constraint: Provide this only with its matching action label and a valid destination. |
| interactive | bool | False | No | Inherited hover/focus elevation. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
| href | str | Not set | No | Inherited whole-card link. Constraint: Use a valid navigable URL and do not combine it with submit-only button fields. |
| bordered | bool | False | No | Inherited card hairline border. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
| legend_position | str | top | No | Legend placement. Allowed: top, bottom, side. Constraint: Allowed values: `top`, `bottom`, `side`. |
| loading | bool | False | No | Shows chart skeleton; takes precedence. Constraint: Use only for a temporary loading state and replace it with real or error content. |
| error | bool | False | No | Shows danger alert; second precedence. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
| error_title | str | Not set | No | Error alert title. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
| error_message | str | Not set | No | Error alert message. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
| empty | bool | False | No | Shows small empty state; third precedence. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
| empty_heading | str | Not set | No | Empty-state heading. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
| empty_body | str | Not set | No | Empty-state body; required when empty. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
| empty_action_href | str | Not set | No | Empty-state action URL. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
| empty_action_label | str | Not set | No | Empty-state action label. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
| mount | SafeString | Not set | No | Pre-rendered chart mount. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
| data_table | SafeString | Not set | No | Pre-rendered semantic fallback table. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
Named blocks
Fill these only when you extend the component template. They are not values passed to an include or tag.
| Block | What it replaces |
|---|---|
| title | Inherited card title block. Constraint: Must be non-empty when it supplies an accessible heading; a named title block may replace it. |
| actions | Inherited card actions block. Constraint: Markup-only extension seam; passing a context variable with this name is ignored. |
| chart_legend | Legend markup. Constraint: Markup-only extension seam; passing a context variable with this name is ignored. |
| chart_mount | Mount or custom state markup. Constraint: Markup-only extension seam; passing a context variable with this name is ignored. |
| chart_data_table | Fallback table markup. Constraint: Markup-only extension seam; passing a context variable with this name is ignored. |
Behaviour
Accessibility and responsive behaviour
- Accessibility
- The fallback table must remain outside the role-img mount so assistive technology can reach it.
- Responsive
- No breakpoint switch; legend position is explicit, not viewport-driven.
- Without JavaScript
- Loading, error, and empty state markup render server-side.
Need help?
Troubleshooting
Contract check: chart_data_table: new, declared HERE for the same reason as the two
Place the accessible data table in the documented `chart_data_table` region, where it remains a sibling of the chart mount.
Explore next