Charts — cards that draw numbers to compare sizes, shares and changes

The three cards on the left are input cards. "Vs. budget" at the top right is a gauge and "Cost breakdown" below it is a 100% bar; both are connected to all three inputs.

• The gauge divides the total of the connected values by the target in the field at the top of the card and shows the result as a percentage. Here the target is the budget, 1,200.
• The 100% bar treats the total of the connected values as 100% and shows each value's share as a length of the bar.

With Lodging set to 650, the total becomes 1,200 and the gauge reads 100%. The bar shows 33%, 54% and 13%. With Lodging set to 750, the gauge reads 108%, and the arc and the number turn orange.

The seven cards on this page have these things in common.

• They only draw; they pass no value on to other cards. A calc card whose formula refers to one of them shows "No value to reference".
• When a connected card has an error, the drawing is replaced by "A connected card has an error" and that card's name.
• A List card connected to them supplies each of its rows as a separate value (on a scatter card, the columns to use are chosen instead).
• The card menu, opened with the "⋯" button at the card's top right or by right-clicking the card, has "Fullscreen", "Copy chart as SVG" and "Copy chart as image (no frame)".
• Dragging the bottom-right corner of the card resizes it.

These cards can also be made from the candidates that appear when number cards are selected and "Visualize" is pressed. The section for each card names the candidate that makes it. How the candidates are chosen is in the usage guide's Visualize page.

Chart

A Chart card draws the values of the connected cards as a bar chart, pie chart, line chart, histogram or box plot. The values appear in the order the cards were connected. Choosing the type, and making the card with "Visualize", are covered under "Chart cards" in the usage guide's Visualize page.

On bar and line charts, "Guide" at the top of the card adds a horizontal line at a chosen value, and the line can be given a name. Ticking "High / low" marks the highest and lowest values and prints their names and values under the chart.

The two small boards below use only a Chart card. The first draws the five values 3, 9, 4, 8 and 6 as a line, in the order they are connected. The second connects the three values 20, 30 and 50 to a Summary card (total 100) and a pie chart, which shows 20%, 30% and 50%.

Open the board with five values as a line ↗

Open the board with three values as a total and a pie ↗

Gauge

A Gauge card shows what percentage of a target the connected value is, as an arc or a bar. It takes one or more cards; with two or more, it uses their total (Board 1). The target is typed into the field at the top of the card. A gauge placed from "Add a card" starts with a target of 100.

• The percentage is rounded to a whole number. Just short of 100% it shows 99%, and above 0 but below 0.5% it shows "<1%".
• Above 100%, the arc stays full, the arc and the number turn orange, and the actual percentage is shown.
• For a negative value the arc stays empty and a negative percentage is shown. With a target of 0 or less, it shows 0%.
• The shape ("Arc" or "Bar") and the colour are chosen at the top of the card.

Connected to a Current & goal card, the gauge uses that card's current value and goal. The target field then shows that goal and cannot be changed on the gauge. Connected to a Min / current / max card, it shows how far the current value has come between the minimum and the maximum.

In "Visualize", the candidate "Vs. target" for one selected number card makes a gauge with a target of 100. "Progress", for two selected cards, makes two cards: a "Progress %" calc card and a gauge.

The board below builds the same thing with formulas. From the current value x and the goal g, calc cards work out the progress 100 × x ÷ g and the remainder g − x, and the progress goes into a gauge. The gauge's target is 100, so the progress value reads directly as a percentage. With x at 65, the gauge shows 65% and the remainder is 35.

Open the board that shows progress on a gauge ↗

Scatter

A Scatter card plots pairs of numbers as points, to show how a horizontal value (X) and a vertical value (Y) relate. Connecting a card brings up "X" and "Y" buttons on the scatter card; the value goes to the axis whose button is pressed.

• The first X card and the first Y card make one point, the second X and the second Y the next, and so on, in the order they were connected. A value with no partner makes no point.
• A List card with two or more columns makes one point per row. The two fields at the top of the card choose the columns for X and Y.
• An XY point card makes one point on its own.
• The ends of each axis show the smallest and largest values. The axes are named after the first X card and the first Y card (or the columns of a list).

Ticking "Regression line" draws the straight line closest to the points (the regression line) as a dashed line, with its equation and the correlation coefficient r. r is between −1 and 1. The closer it is to 1, the closer the points lie to a line rising to the right; the closer to −1, to a line falling to the right. With only one point, it shows "No line (not enough points)".

Board 2 connects a list of six days of high temperatures (°C) and ice-cream sales to a scatter card (the numbers are made up for the example). Hotter days have more sales, so the points rise to the right. The regression line is y = 9.333x − 100, and the correlation coefficient is r = 0.992. Changing a number in the list moves the points and the line with it.

A point that comes from an input card, or from a calc card holding just a number, can be dragged. Dragging it rewrites the number on the card it comes from. Points made from list rows cannot be dragged. The board below places three points from six calc cards (x₁–x₃ and y₁–y₃).

Open the board with three points from six cards ↗

In "Visualize", the candidate "Scatter (col × col)" for one selected list card with two or more columns makes this card.

100% bar

A 100% bar treats the total of the connected values as 100% and shows each value's share in a single bar. It takes one or more cards. The parts run from left to right in the order they were connected, and a list under the bar gives each name and percentage (Board 1).

• The percentages are whole numbers, rounded so that they add up to exactly 100%.
• A narrow part has no percentage written inside the bar; it appears only in the list below.
• A negative value brings up "A 100% bar cannot show negative values" with that card's name. When every value is 0, it shows "The values add up to 0, so there is no share to draw".

In "Visualize", the candidate "Share (band)" for one selected list card with a single column of values that are all 0 or more makes this card.

Radar

A Radar card places three or more values on axes running out from the centre, one value per axis, and joins the points into a polygon. It takes three or more cards; with two or fewer it shows "Connect 3 or more cards". The axes follow the order of connection, clockwise from the top, and each axis ends with the card's name and value.

• "Max" is the value of the outer ring. Left blank ("auto"), it is the largest of the connected values.
• "Steps" is the number of rings: 3, 4, 5 or 10. Each ring is labelled with its value.
• A value above "Max" sits on the outer ring, and a negative value sits at the centre. The number at the end of the axis is always the connected value itself.

Board 3 is an example with scores in five subjects: Reading 80, Math 65, Writing 90, Science 70 and History 75. "Max" is 100 and "Steps" is 5, so the rings are 20 points apart. With Math set to 85, the point at the upper right moves outwards.

In "Visualize", the candidate "Profile shape" appears when three or more cards with values of 0 or more are selected by dragging a box around them; it makes this card.

Waterfall

A Waterfall card stacks a series of gains and losses in order and shows where they end up. The bars run from left to right in the order the cards were connected. The first card is one of the steps too, stacked up from 0. Gains are green, losses are red, and the blue bar at the far right is the "Total". Each bar has its change above it, such as +2,500 or −800, and the card's name below it. A long name is cut short with "…".

Board 4 is an example of one month's money in and out, with spending entered as negative numbers. Pay of 2,500, less rent 800, food 500, bills 150 and other spending 450, leaves a total of 600. With Bills set to −350, the total becomes 400.

The board below starts at 100 and stacks +30, −20 and +10 on it, for a total of 120.

Open the board with three steps from 100 ↗

In "Visualize", the candidate "Rise & fall" for two or more selected cards with both positive and negative values makes this card.

Area

An Area card draws a rectangle with two values as its width and height, and prints their product after "=". It works as an area model: a picture of a multiplication as the area of a rectangle.

• It takes two cards. The first is the width, with its name and value under the rectangle; the second is the height, shown on the left. A third card is not used.
• With only one card, it shows "Connect two cards".
• The rectangle is scaled to fit the card, but the ratio of width to height stays the ratio of the values.
• A negative value draws the same rectangle, and the number after "=" is negative.

The number after "=" cannot be referred to from other cards. To use the area in a further calculation, write the multiplication in a calc card.

The board below connects a flower bed 6 m wide and 4 m deep and shows "= 24" (24 m²). With Width set to 9, it shows "= 36".

Open the board that draws an area from width and depth ↗

In "Visualize", the candidate "Compare by area" for two selected cards that are both positive makes this card.

Articles that use these cards

• Mean and median — a Chart card set to histogram draws how the scores and the savings are spread.
• Unit conversion — an Area card works out the area after the height and width are converted to centimetres.

Read next — Analysis & explanation Cards that show how a result changes as the inputs move, and a card that puts a calculation into words.

---

Back to the card reference →