Most diagrams are shapes and arrows, but sometimes you want to show a value: how far along a project is, how good something scored, how a total splits up, or where milestones fall on a line. livediagram has a small family of data elements for exactly that. They behave like any other element once they land, so you can move, resize, recolour, lock, and theme them as usual.
Where to find them
The charts and meters live in the palette's Data category, which Illustrate and Facilitate offer on the palette strip. Diagram mode has no Data category: open the search panel (⌘K or Ctrl+K), type the element's name, such as "pie" or "rating", and pick it under Add to canvas. The Timeline rail is the exception: it sits in the Build category, in both modes.
What you can add
- Pie chart splits a total into slices you edit as label and value rows, drawn in your theme's colours. See Pie Chart.
- Column, bar and line charts: a column or bar chart compares one value per category, and a line, area or scatter chart plots one or more series across categories, from an editable grid or a CSV import. See Bar and Line Charts.
- Legend is a key of coloured rows that says what each colour means. See Legend.
- Progress and Donut show a single 0 to 100 percentage as a filling bar or a ring, with optional fill, pulse, or stripe animations. See Progress Bars and Rings.
- Rating shows a one to five score as a row of stars, in an amber accent, with star-specific animations. See Rating.
- Timeline is a horizontal rail of evenly spaced, labelled points, handy for roadmaps and process steps. See Timeline Rail.
How they work
Pick a tile, then tap the canvas to drop the element with sensible sample values, or drag to draw it at a size, so you always start from something that looks finished. From there you tune it in the element's context menu: right-click (or long-press on a touch screen), open Tools, and you'll find a section for that element's data, whether that's a percentage slider, a star picker, editable value rows, or a points stepper.
Because they are ordinary canvas elements underneath, everything you already know carries over. Charts and meters take their colours from the active theme (a rating keeps its amber stars), so they read as part of the diagram out of the box, and animations respect your system's reduce-motion setting and freeze when you export, so a still image looks right.
Mix data elements with regular shapes and arrows to annotate a system map: drop a progress ring next to a service to show its rollout, or a rating beside an option you're comparing.
Was this article helpful?