Chart
A Chart is a kind of Sketch that draws data. You describe the chart in Vega-Lite — a short JSON spec that says "these numbers, as bars, this field on the x-axis" — and Lino draws it. Charts are live: hover, click or drag where the chart supports it.
Example: this spec draws three bars, A, B and C:
{
"data": { "values": [
{ "category": "A", "value": 28 },
{ "category": "B", "value": 55 },
{ "category": "C", "value": 43 }
]},
"mark": "bar",
"encoding": {
"x": { "field": "category", "type": "nominal" },
"y": { "field": "value", "type": "quantitative" }
}
}
You don't have to write specs by hand: start from a sample, or ask Lino AI.
Create a Chart
- Right-click a blank spot on the Canvas → Sketch.
- Double-click the new Sketch and choose Chart ("Data charts from Vega-Lite code").
- Edit the spec in the code window beside it, or pick a sample.
A Sketch decides its kind from its code: code that starts with { is a Chart, anything else is a Diagram.
Samples
Click Samples in the code window's header to browse the Vega-Lite example gallery as thumbnails, grouped under Single-View Plots, Composite Marks, Layered Plots, Multi-View Displays, Maps (Geographic Displays) and Interactive. Picking one replaces your code; then change the data and labels.
Where the data comes from
A Chart draws only data it carries with it:
- Values written in the spec, under
"data": { "values": [...] }— the usual way. - A bundled example file, such as
"url": "data/cars.json"or"data/stocks.csv"— the files the samples use.
Charts never load data from the web. If a spec points somewhere else, Lino says so, for example: "Charts draw only the data written in them or a bundled file like "data/cars.json" — other "url"s are not allowed." Other things a Chart refuses: links (href), and "container" as a width or height — give sizes in pixels.
Charting your own file
To chart a CSV, TSV or JSON file, ask Lino AI ("chart the monthly totals in sales.csv"). It reads the file and writes its rows into the Chart. The Chart keeps its own copy of the data; it does not stay linked to the file, so if the file changes, ask again.
Interactive Charts
When a Chart responds to the mouse, its toolbar shows Interactive. Hover it to see what to try, for example "Interactive: try click, drag, scroll" or "Interactive: try hovering".
A Chart is live while you're looking at it closely: in the Right Panel, while you edit it on the Canvas, and in a Card that you are editing. Elsewhere it shows a still picture of how it first looks.
A live Chart keeps clicks and drags for itself. If a double-click on the chart doesn't start editing, open it with the panel button in its header instead.
Charts inside Cards
Type @ in a Card and pick the Chart, or right-click the Chart → Copy as a reference and paste it into a Card. While you edit the Card, the Chart in it is live; scrolling over it scrolls the Card rather than zooming the Chart.
Lino AI and Charts
Ask in plain words: "make a bar chart of these numbers", "plot temperature by month from weather.csv". Lino AI writes the spec for you and can edit an existing Chart's spec. New Charts land in your Inbox for you to place.
When Lino AI shows a chart in its reply, use Add chart to canvas to keep it; afterwards the button reads Show in Canvas.
For a read-only chart, ask for a Chart. If you want buttons, inputs or live data, that's a Spark.
Good to know
- Chart colours are fixed and the background is transparent, so a Chart looks the same in light and dark mode.
- Charts have no Hand-drawn style.
- More sketch actions → Clear code (Right Panel) empties a Chart.