A Tessel library
Lines, dots, areas and bars, on linear or log axes, with ticks, titles and a legend worked out for you. Draw one into a Canvas, or save it as a PNG or a PDF from a program with no window at all.
tessel add chart
Every picture here was saved by the code under it, with nothing but import chart. The ranges, ticks, labels and legend place are all chosen by the library.
Plot y = f(x) from a block, and label one point on it.
var c = chart.Chart(title: "Free fall", xLabel: "Time (s)", yLabel: "Distance (m)")
c.function(from: 0, to: 3, name: "d = g t² / 2") { t in 9.81 * t * t / 2.0 }
c.point(x: 2, y: 19.62, label: "19.6 m after 2 s")
c.savePNG("fall.png")
Each bars call adds a series; they stand side by side.
var rain = chart.Chart(title: "Monthly rainfall", yLabel: "Rain (mm)")
let months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
rain.bars(months, [19, 8, 12, 25, 110, 260, 420, 470, 360, 190, 130, 60], name: "2025")
rain.bars(months, [25, 15, 9, 40, 150, 230, 380, 520, 300, 210, 100, 45], name: "2026")
rain.savePNG("rainfall.png")
A filled area under one series, another on top, and a named level across.
var flood = chart.Chart(title: "Flood routing", xLabel: "Time (h)", yLabel: "Flow (m³/s)")
let hours = [0.0, 6, 12, 18, 24, 30, 36, 42, 48, 54, 60, 66, 72]
flood.area(hours, [20, 80, 310, 520, 450, 330, 230, 160, 110, 75, 50, 35, 25], name: "inflow")
flood.line(hours, [20, 32, 110, 240, 330, 340, 300, 240, 180, 130, 90, 62, 44], name: "outflow")
flood.horizontalLine(300, label: "spillway capacity")
flood.savePNG("flood.png")
Measured dots with a dashed line through them.
var fit = chart.Chart(title: "Spring test", xLabel: "Load (kN)", yLabel: "Extension (mm)")
fit.scatter([0, 1, 2, 3, 4, 5, 6], [0.1, 1.9, 4.1, 6.0, 8.2, 9.7, 12.1], name: "measured")
fit.line([0, 6], [-0.02, 12.04], name: "fit", dash: [6, 3])
fit.savePNG("spring.png")
Colours come in turn from the palette; the legend goes where it covers the least.
var waves = chart.Chart(title: "Damped oscillation", xLabel: "Time (s)", yLabel: "Displacement (mm)")
waves.function(from: 0, to: 10, steps: 400, name: "underdamped") { t in 10.0 * exp(-0.3 * t) * cos(3.0 * t) }
waves.function(from: 0, to: 10, name: "envelope", dash: [4, 4]) { t in 10.0 * exp(-0.3 * t) }
waves.function(from: 0, to: 10, name: "critically damped") { t in 10.0 * (1.0 + 3.0 * t) * exp(-3.0 * t) }
waves.savePNG("waves.png")
Values over many powers of ten, with faint lines at 2 to 9 of each.
var growth = chart.Chart(title: "Bacterial growth", xLabel: "Time (h)", yLabel: "Cells per mL", yScale: .log)
growth.scatter([0, 2, 4, 6, 8, 10, 12], [1.2e3, 5.1e3, 1.9e4, 8.3e4, 3.1e5, 1.4e6, 5.6e6], name: "counted")
growth.function(from: 0, to: 12, name: "doubling every 1 h") { t in 1.2e3 * pow(2.0, 1.02 * t) }
growth.savePNG("growth.png")
Fixed y range, dots on each point, and named lines up the chart.
var grain = chart.Chart(title: "Grain size distribution", xLabel: "Particle size (mm)", yLabel: "Percent finer (%)",
yMin: 0, yMax: 100, xScale: .log)
grain.line([0.002, 0.01, 0.075, 0.25, 0.6, 2.0, 4.75, 19], [2, 8, 22, 45, 63, 82, 93, 100], name: "sample A", markers: true)
grain.verticalLine(0.075, label: "No. 200")
grain.verticalLine(4.75, label: "No. 4")
grain.savePNG("grain.png")
With equalAspect, a metre is as long across as up.
var section = chart.Chart(title: "Channel cross-section", xLabel: "Offset (m)", yLabel: "Elevation (m)", equalAspect: true)
section.line([0, 2, 5, 7, 9, 12, 14], [6, 5.5, 1.2, 0, 0.3, 4.8, 6], name: "ground", markers: true)
section.horizontalLine(3.2, label: "water 3.2 m")
section.savePNG("section.png")
Add the library to a project, make a chart.Chart, add data, and save or draw it. A chart is a plain value: build it with var, and make a new one whenever the data changes.
tessel add chart
import chart
fn main() {
var c = chart.Chart(title: "Free fall", xLabel: "Time (s)", yLabel: "Distance (m)")
c.function(from: 0, to: 3, name: "d = g t² / 2") { t in 9.81 * t * t / 2.0 }
c.point(x: 2, y: 19.62, label: "19.6 m after 2 s")
c.savePNG("fall.png")
}
draw returns the chart's Frame. It turns data into points for drawing on top, and points back into data for reading the value under the mouse.
import chart
// A chart in a window, with a readout that follows the mouse.
app Cooling(title: "Cooling", width: 640, height: 400) {
state mouseX: Float = -1.0
Canvas { g in
var c = chart.Chart(title: "Newton's law of cooling", xLabel: "Time (min)", yLabel: "Temperature (°C)")
c.function(from: 0, to: 30, name: "coffee") { t in 22.0 + 68.0 * exp(-0.08 * t) }
c.horizontalLine(22, label: "room")
let f = c.draw(g)
// The mouse's position, turned into a time on the chart.
let t = f.xAt(mouseX)
if t >= 0.0 && t <= 30.0 {
let temp = 22.0 + 68.0 * exp(-0.08 * t)
g.fillCircle(x: f.px(t), y: f.py(temp), radius: 4, color: .red)
g.text("{t.formatted(decimals: 1)} min: {temp.formatted(decimals: 1)} °C", x: f.px(t) + 8.0, y: f.py(temp) - 6.0, size: 12, align: .bottomLeading, halo: .background, haloWidth: 2.0)
}
}
.onPointer { e in
mouseX = e.x
}
.padding(12)
}
Everything but the data is optional. A series with a name is listed in the legend; one with no color gets the next of the chart's colours. A value that is NaN, or 0 or less on a log axis, breaks the line there.
| Method | Draws |
|---|---|
line(xs, ys, name:, color:, width:, dash:, markers:) | A line through the points, in order. dash: [6, 3] makes it dashed; markers: true puts a dot on each point. |
scatter(xs, ys, name:, color:, size:) | A dot at each point. |
area(xs, ys, name:, color:, width:) | A line with the space down to the x axis (to 0, when 0 is on it) lightly filled. |
bars(labels, values, name:, color:) | A bar for each category. Several bars calls stand side by side. |
function(from:, to:, steps:, name:, …) { x in … } | The line of y = f(x). |
horizontalLine(y, label:, color:) | A dashed level across the chart, named at its right end. |
verticalLine(x, label:, color:) | A dashed line up the chart, named at its top. |
point(x:, y:, label:, color:) | A dot with a label beside it. |
They're the Chart's fields: give them when you make it (in this order), or set them afterwards.
| Field | |
|---|---|
title, xLabel, yLabel | The title, and what each axis shows. |
xMin, xMax, yMin, yMax | The axes' ranges. Left out, each is worked out from the data: lines fill the width exactly, dots get a little room, the y axis gets 5% to spare, and bars and areas stand on 0. |
xScale, yScale | .linear, or .log for values over several powers of ten. |
equalAspect | A unit as long across as up, for maps and cross-sections. |
grid | Lines across the plot at the ticks (on by default). |
legend | .automatic (the corner covering the least data), .topLeading, .topTrailing, .bottomLeading, .bottomTrailing or .hidden. |
colors | The colours series get in turn: blue, orange, green, red, purple, pink, gray, yellow. |
| Method | |
|---|---|
draw(g, x:, y:, width:, height:) | Draws into a Canvas's (or renderImage's) Graphics: the whole canvas, or the rectangle given, so one canvas can hold several charts. Returns the Frame. |
savePNG(path, width:, height:, scale:, background:) | Saves a PNG (a JPEG if the path ends in .jpg), 720 × 450 points at 2 pixels per point unless you say. |
savePDF(path, width:, height:) | Saves a one-page PDF, with lines and text kept sharp at any size. |
frame(g, x:, y:, width:, height:) | The Frame that draw would use, without drawing. |
A Frame's px(x) and py(y) turn data into canvas points, and xAt(px) and yAt(py) turn them back. It also has the plot area's left, top, width, height, right and bottom, and contains(px, py). For axes of your own, tickStep(span:count:), ticks(from:to:count:), logTicks(from:to:count:) and tickLabel(value, step:) are public too.
Data that doesn't fit together, like 5 x values with 4 y values, is a mistake in the code. It stops the program with a message:
chart: line got 5 x values but 4 y values: they must be as many