Charts
Charts are drawn with TanStack Charts, the engine both products already use through Nitti’s chart package. The design system gives it one look: the colours, the guides, the labels and the motion come from the tokens, so a chart follows the brand and the theme chosen at the top of the page without any code of its own. They are grouped here by the question a reader brings.
Comparing amounts
Bars in their forms, for amounts set against each other. Each is one call from lib/chart, drawn by Chart inside a ChartFigure. Point at one for its values.
Responses by kind of body
Bars, one series: the value sits on each bar, so the axis can go.
Source: Consultation responses, compiled 14 September 2026
Conditions raised
A ranking: horizontal bars, longest first, names in full.
Source: Consultation responses, compiled 14 September 2026
Position by kind of body
Grouped: compare the positions inside each group.
- Supports
- With conditions
- Opposes
Source: Consultation responses, compiled 14 September 2026
Position by kind of body
Stacked: the same rows when each group's total matters too.
- Supports
- With conditions
- Opposes
Source: Consultation responses, compiled 14 September 2026
Mix of positions by kind of body
Shares: every group filled to 100%, to compare the mix when the groups differ in size.
- Supports
- With conditions
- Opposes
Source: Consultation responses, compiled 14 September 2026
Which way each group leans
Diverging: an ordered scale laid around a centre line, against to the left and for to the right.
- Opposes
- With conditions
- Supports
Source: Consultation responses, compiled 14 September 2026
Months to a decision, by region
A range: two values per row and the distance between them.
- 2019
- 2025
Source: Regional authorities, annual reports 2019 to 2025
Bodies cited most in the debate
A bar list: a ranking whose names are too long for an axis, or a place too narrow for one.
- Regional grid association of the northern counties34
- Municipal federation, committee on energy and land27
- Environmental agency, species protection unit19
- Industry energy council12
- Landowners' association8
Source: Committee record, 16 October 2026
Change over time
Lines and areas for one thing followed through time, and a reference line for the value it is held against.
Months from application to decision
Lines: change over time. One tooltip reads every series at a year.
- Grid connections
- All energy permits
Source: Regional authorities, annual reports 2019 to 2025
Responses received per week
An area: one series whose volume matters as much as its direction.
Source: Consultation responses, compiled 14 September 2026
Responses so far, by position
A stacked area: how a growing total is made up.
- Supports
- With conditions
- Opposes
Source: Consultation responses, compiled 14 September 2026
Grid connections against the bill's limit
A reference line: a target, a limit or an average to hold the data against, named in the legend.
- Months to a decision
- The bill's limit: 12 months
Source: Regional authorities, annual reports 2019 to 2025
Parts of a whole
One total and what it is made of: a donut for a few parts, a waffle when the whole can be counted, a share bar on one line, a treemap for many parts in groups.
Where the consulted bodies stand
A donut: a few parts of one whole, the total in the middle.
- Supports
- With conditions
- Opposes
Source: Consultation responses, compiled 14 September 2026
The 41 responses, one by one
A waffle: a whole small enough to count, one tile for each response.
- Supports
- With conditions
- Opposes
Source: Consultation responses, compiled 14 September 2026
The chamber's vote
A share bar for the result, and the same four answers by party as stacked bars.
- Yes18754%
- No14241%
- Abstained82%
- Absent123%
Source: Chamber record, 12 November 2026. The parties are invented.
Planned grid investment, SEK billion
A treemap: many parts in groups, each as large as its amount.
- North
- South
- Mid
- Capital
Source: Grid owners' investment plans, 2026 to 2030
Relationships and spread
Two measures together, where something concentrates, and how one number is spread.
More line, longer wait
A scatter: two numbers per municipality. The dot's size is a third, its inhabitants.
Source: Regional authorities, annual reports 2019 to 2025
Who to talk to
A map in four corners: support against influence, each corner named for what to do there.
- 1Energy producers
- 2Grid association
- 3Industry council
- 4Municipal federation
- 5Environmental agency
- 6Landowners
- 7Nature society
- 8Rural network
- 9Consumers' forum
- 10Transport union
Source: Our assessment, 20 September 2026
Who raises which condition
A heatmap: one number for every pair of two categories. The colour finds the cluster; the number says how many.
Source: Consultation responses, compiled 14 September 2026
How long 214 permits took in 2025
A histogram: how one number is spread, counted into six-month intervals.
- Permits
- The bill's limit: 12 months
Source: Regional authorities, annual reports 2019 to 2025
Flows
Amounts on the move between states.
How positions moved from spring to autumn
A flow: each band is a group of bodies, as thick as their number, running from where they stood to where they stand.
Spring roundAutumn round
Source: Consultation responses, compiled 14 September 2026
Numbers to watch
For a widget or the top of a report: the number, how it has moved, and a sparkline of the road there. The colour of the change says whether it is welcome, not which way it went.
Responses received
41
9 more than last week
Months to a decision
27
3 fewer than in 2024
Open permit cases
1,284
6% more than a year ago
Which chart
Start from the question the reader has, not from the data's shape.
| How do a few amounts compare? | Bars | barChart, labels on one series |
| Which are the biggest, in order? | Horizontal bars, or a bar list | barChart horizontal with sorted rows; BarList when names are long or the place is narrow |
| How do groups compare, part by part? | Grouped bars | barChart with series |
| The same, when each group's total matters | Stacked bars | barChart, layout "stacked" |
| How does the mix differ between groups of different size? | Share bars | barChart, layout "share" |
| Which way does each group lean on an ordered scale? | Diverging bars | divergingChart, centred on the neutral answer |
| How far apart are two values, row by row? | A range | rangeChart: before and after, low and high |
| How has it changed over time? | Lines | lineChart |
| The same, for one series where volume matters | An area | lineChart with area |
| How is a changing total made up? | A stacked area | lineChart, area "stacked" |
| Is it above or below a target? | A reference line | reference on barChart or lineChart, named in the legend |
| What is the number now, and where is it heading? | A stat with a sparkline | ChartStat, Sparkline |
| How is one whole divided, in five parts or fewer? | A donut, or a share bar | donutChart with ChartCenter; ShareBar where there is one line to spare |
| The same, when the whole is small enough to count | A waffle | waffleChart |
| How is a whole divided into many parts, in groups? | A treemap | treemapChart |
| Do two measures move together? Which things stand apart? | A scatter | scatterChart, with size for a third measure |
| Where does each thing sit on two scales that call for action? | A map in four corners | scatterChart with quadrant and names, and a ChartKey under it |
| Where does something concentrate across two categories? | A heatmap | heatmapChart |
| How is one number spread? | A histogram | histogramChart |
| Where did the amounts go, from one state to another? | A flow | flowChart |
| Exact numbers, or more than about twenty rows | A table | No chart: Table, or DocumentTable in a document |
Colours
Two sets, never mixed for the same thing.
Series
Categories that are neither good nor bad: kinds, regions, products. The brand's accent is first; the order is fixed. The first has a second tone for lines and dots, which have no area to be seen by: the same colour in Nitti, a deeper one on Polyther's light pages (--chart-1-line; the legend below draws its line and its point in it).
--chart-1
First
--chart-2
Second
--chart-3
Third
--chart-4
Fourth
--chart-5
Fifth
Meaning
When the category is a judgement: for or against, yes or no, better or worse. The same in both brands, and always named in a legend as well.
--chart-positive
For, yes, better
--chart-caution
With reservations
--chart-negative
Against, no, worse
--chart-neutral
Neither, other
--chart-none
Absent, no answer
- A bar or an area
- A line
- A point
- An earlier value
- A reference line
The look
What every chart shares. lib/chart-base holds these values (chartTheme, chartAxis, chartGrid, chartMotion, chartReference) for a chart built by hand.
| Colour | Series colours for categories that are neither good nor bad, in a fixed order with the brand's accent first. Meaning colours when the category is a judgement. One thing keeps one colour in every chart of a document. A sixth series means a different chart, or an Other in the neutral. |
| Guides | Horizontal grid lines only, 1 px at 9% of the text colour. No axis line, no tick stubs, no frame around the plot. A reference line is dashed, in the text colour, and named in the legend. |
| Labels | 11 px, muted, tabular figures. The value axis has about four ticks. A single series prints its values on the bars and drops the axis. Axes get a title only where the unit is not obvious (a scatter). |
| Marks | Bars carry a 4 px radius on the end that shows the value. Lines are 2 px and monotone, with points while there are sixteen or fewer per series. An area is its line over a 14% fill. Dots sit on a ring of the background so they separate where they overlap. |
| Narrow screens | A chart fits the width it gets, down to 320 px, with nothing to set. Names along the bottom sit side by side, go on a slant when they no longer fit, and are thinned only as a last resort. Names down the side are cut with an ellipsis so the bars keep their room; the tooltip has them in full. Line charts label as many points as fit, evenly spaced. A scatter that cannot fit its names numbers the dots and lists the names underneath (ChartKey). |
| Tooltip | A popover surface: what is pointed at, then a row per series with its colour and value. Bars and lines read every series at the pointed position. On a phone a tap opens it, a tap outside or a scroll lets it go, and a finger moving sideways reads along the chart. Sparklines and the HTML charts have none: their numbers are printed. |
| Motion | One entrance when the chart is first scrolled into view: 480 ms, bars staggered. Keyed updates glide to their new values. Nothing moves under reduced motion. Sparklines do not animate. |
| Around the chart | ChartFigure: a title that says what the chart shows, one line on how to read it, the legend as text, and the source underneath. The legend is HTML, never drawn in the plot, and draws each entry the way the chart does (a square, a line, a dot, a dash). |
| Access | Every chart has an ariaLabel that says what it shows. Points take keyboard focus. Colour is never the only carrier: parts are named in the legend and the tooltip, and exact values are in the text, on the marks or in a table nearby. |