Data and Chart Elements

Turn plain numbers into something you can read at a glance, right on the canvas.

Most pages are shapes and text, 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. livedesign 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.

The data elements at a glance: a progress bar and ring, a star rating, and a pie chart.

Where to find them

The charts and meters live in the palette's Data category on the palette strip, followed by the Table. A logo page 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 is a concept graphic: it sits in Concepts.

The Data category: each chart and meter as a row, with a line on what it is for.

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.

Take the tour

The first time you select a chart, a small Show Me toolbar appears beside its toolbar. Press Play for a short walkthrough on your own chart: reading it, a preview of the Grow animation, the chart's menu (Chart Type, Data and Chart), and on a line, area or scatter chart its data grid, which the tour opens for you and closes when you finish. Press the cross if you would rather not; either way it is not offered again. To be offered it again, open Settings, then Tours, open Show Me and switch Chart back on.

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 page 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 text to fill a screen: drop a chart into a dashboard wireframe, a progress ring beside an upload, or a rating beside a product.

Was this article helpful?