Display form control

Chart

<ut-chart>

Bar, line, area, pie or doughnut chart of static data, another field's rows, lookup results or a saved report, with keyboard-navigable points.

Officialv1.0.0

Download .utpkg 86 KB Install in your workspace

Try it

Live preview

The real control in the same sandboxed frame the app uses. Switch to dark mode or read-only to see how it adapts.

Monthly sales

Use the arrow keys on the chart, or press Show data table.

Value the form receives

{
  "label": "Mar",
  "value": 18,
  "series": "Sales"
}

Sandboxed frame (opaque origin, its own CSP), talking to this page only through the typed postMessage bridge — exactly as on a form.

About

What it does

Put a chart on any form: a budget breakdown beside the approval buttons, monthly volumes on a review step, the rows someone just typed into an editable table, open cases per region from a data table lookup, or a saved report. Choose bar, horizontal bar, line, area, pie or doughnut, stack series, group rows by label (sum, count or average) and pick colours, or let it follow the form theme in light and dark mode.

The chart is accessible without the picture: the plot is one Tab stop where the arrow keys walk the points and a screen reader announces each one ("Mar: 18 (Sales)"), and the Show data table button lays every value out in a real table. Turn on Selectable points and a click or Enter makes the chosen point the field's value ({ label, value, series }), so a workflow can branch on what someone picked.

Good for

Budget or cost breakdown beside an approval decision
Live chart of the rows entered in an editable table on the same form
Open cases per region from a data table, or a saved report on a review step
Let a reviewer pick the month or category to investigate

After installing

Install the package: Chart appears in Extensibility → Form controls and in the form designer's palette under Custom.
Drag Chart onto a form and choose the chart type and the data source in the properties panel.
Static data: paste the data as JSON. Another field: map the Data context entry to the field with the rows (e.g. an editable table) and set Label field / Value field.
Lookup source: set the field's lookup source (a data table or API reference) with Min characters 0, then Label field / Value field to the lookup's columns.
Saved report: set Saved report (report_id) to the report's id. People only see the report if it is theirs or shared with them.

Reference

Value, properties and accessibility

Value

{ label: string, value: number, series: string | null }

Stored as the field's value (type json), validated by the server against the control's schema; the control also reports its own validity while people type.

Read-only views (completed tasks, mobile, emails) show {{value.label}}: {{value.value}}.

Keyboard and screen readers

Role: group, named by the field label.

Tab to the chart; Left / Right move through the points (Up / Down change series), Home / End jump to the first / last, Enter selects the point when points are selectable, Escape leaves the point. The 'Show data table' button shows every value in a table.

Properties (set in the form designer)
Property	Type	Default	What it does
Chart title `chart_title`	string	—	Shown above the chart and used as the data table's caption.
Chart type `chart_type`	Bar / Horizontal bar / Line / Area / Pie / Doughnut	bar
Data source `source`	Static data (below) / Another field (map the Data context entry) / Lookup source (set the field's lookup, Min characters 0) / Saved report (set the report_id property)	static
Static data `data`	json	[object Object], [object Object], [object Object], …	For Static data: [{"label":"Jan","value":12}, …] or {"labels":[…],"datasets":[{"label":"Sales","data":[…]}]}.
Saved report `report_id`	string	—	For Saved report: the report's id (open it in Reports — the id is in the address bar). People see only what they can see in Reports.
Lookup query `lookup_query`	string	—	For Lookup source: the search text sent to the lookup (empty = everything).
Label field `label_field`	string	—	The row field (or report column key) for the labels. Defaults to the first text field.
Value field `value_field`	string	—	The row field for the values. Defaults to the first numeric field.
Series fields `series_fields`	list	—	Several numeric fields, one series each (instead of Value field).
Group by label `aggregate`	No grouping / Sum / Count rows / Average	none
Show legend `show_legend`	boolean	yes	Shown for pie / doughnut charts and when there is more than one series.
Stack series `stacked`	boolean	no
Colours `colors`	list	—	Series / slice colours (#hex). Defaults to the theme's primary colour plus accessible companions for light and dark mode.
Chart height (px) `height`	number 120–1000	280
Selectable points `selectable`	boolean	no	Clicking a point (or Enter on it) makes it the field's value: { label, value, series }.

Context (other fields it reads)

data — Data: For 'Another field': a field whose value is a list of rows, such as an editable table. Label field / Value field pick the columns.

The designer maps each one to a field of the same form; the control receives those values read-only.

Capabilities and security

Lookups: Suggestions come from the field's lookup source — a data table, or an API reference the UserTasks server calls with credentials stored on the server. The control only sees the suggestions.
Saved reports: Rows of the saved report the designer chose (the field's report_id, read by the server from the stored form), run as the person filling in the form: only reports they can open, with their permissions.

Install

Install it in your workspace

Works on UserTasks cloud and any self-hosted instance. The control lands in Extensibility → Form controls, enabled, and appears in the form designer's Custom palette.

In the app

Open Extensibility → Form controls → Browse gallery (it opens Packages → Browse gallery on the Form controls tab) and choose Install on Chart. Or download form-control-chart-1.0.0.utpkg and drag it onto Automations → Packages.
The wizard verifies the checksum, every file hash and the signature, and shows what it adds.
Drag the control onto a form in the designer and set its properties.

With the CLI

shell

curl -fLO https://usertasks.com/gallery/form-control-chart-1.0.0.utpkg
usertasks packages inspect form-control-chart-1.0.0.utpkg
usertasks packages install form-control-chart-1.0.0.utpkg

Verify the download

File SHA-256: 4869406798564904bd98e8bc6cec9a003c23e64c312ba2ef822549c7fbbeefd6
Package checksum (what is signed): sha256:aeaef731f090ce4fc04410257afe795692058a15822234486dc859b4197224e5
<ut-chart> module SHA-256: 8e2fa70f0ed224efdc4ecd46baf1dc0b9ce2b5ec3daf8f2b19bd3225775632db
Signer: UserTasks Gallery · 49:f3:04:90:47:02:4d:07:28:61:3d:dc:bb:aa:db:11

More form controls

All controls