A section of an analytical report laid out as a document. It has a title block, a summary, numbered findings, then method, limitations and sources. Each finding has one exhibit, an observation and a separately labelled interpretation with a confidence rating and a caveat.
Progress meter
A labelled horizontal meter of one value against a maximum or target, with the target marked and the value printed.
- Use when
- Progress toward a goal, a quota or a capacity: funds raised, budget spent, share of a target reached. Stack several with
size: "sm"to compare progress across a few items. - Avoid when
- Comparing more than a handful of items (use bar chart), anything without a meaningful end point (use big number), or a gauge dial.
Preview
Homes with a heat pump or district heating46%
2030 target 70%
Up from 31% in 2020. At the current rate the target is reached in 2033.
import { ProgressMeter } from "insightcharts";
export function Example() {
return (
<ProgressMeter
label="Homes with a heat pump or district heating"
value={0.46}
max={1}
showMax={false}
target={0.7}
targetLabel="2030 target"
context="Up from 31% in 2020. At the current rate the target is reached in 2033."
/>
);
}{
"type": "progress-meter",
"label": "Homes with a heat pump or district heating",
"value": 0.46,
"max": 1,
"showMax": false,
"target": 0.7,
"targetLabel": "2030 target",
"context": "Up from 31% in 2020. At the current rate the target is reached in 2033."
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Composition
Used in
1 template uses progress meter.
Templates
1Installation
$ pnpm dlx shadcn@latest add @insightcharts/progress-meterThe CLI copies the source into your project and needs the @insightcharts registry in components.json; see installation. With the package, import it by name:
import { ProgressMeter } from "insightcharts";Examples
Against a maximum
Annual carbon budget used318 Mt of 400 Mt
With ten weeks of the year left.
import { ProgressMeter } from "insightcharts";
export function Example() {
return (
<ProgressMeter
label="Annual carbon budget used"
value={318}
max={400}
format={"{value} Mt"}
tone="negative"
context="With ten weeks of the year left."
/>
);
}{
"type": "progress-meter",
"label": "Annual carbon budget used",
"value": 318,
"max": 400,
"format": "{value} Mt",
"tone": "negative",
"context": "With ten weeks of the year left."
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Target passed
Fundraising round$2.3M
Target $2M
Closed 17% above the goal.
import { ProgressMeter } from "insightcharts";
export function Example() {
return (
<ProgressMeter
label="Fundraising round"
value={2340000}
target={2000000}
format="currency:USD"
tone="positive"
context="Closed 17% above the goal."
/>
);
}{
"type": "progress-meter",
"label": "Fundraising round",
"value": 2340000,
"target": 2000000,
"format": "currency:USD",
"tone": "positive",
"context": "Closed 17% above the goal."
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Small, low value
Rural fibre coverage8%
Goal 95%
import { ProgressMeter } from "insightcharts";
export function Example() {
return (
<ProgressMeter
size="sm"
label="Rural fibre coverage"
value={0.08}
target={0.95}
targetLabel="Goal"
/>
);
}{
"type": "progress-meter",
"size": "sm",
"label": "Rural fibre coverage",
"value": 0.08,
"target": 0.95,
"targetLabel": "Goal"
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| valuerequired | number | The current value. | |
| labelrequired | string | What is measured, sentence case. | |
| max | number | End of the track. Defaults to the target, or 1 with no target. | |
| min | number | 0 | Start of the track. |
| target | number | A goal or threshold, drawn as a tick and labelled. | |
| targetLabel | string | "Target" | Name for the target tick. |
| showMax | boolean | Print "of {max}" after the value. Default: only when max is given. | |
| context | string | A line under the meter that gives the number meaning. | |
| format | FormatSpec | Number format. Defaults to "percent" when the track ends at 1 or less, otherwise "auto". | |
| tone | "accent" | "positive" | "negative" | "neutral" | "accent" | Fill colour by meaning. |
| size | "sm" | "md" | "md" | sm for dense stacks. |