Skip to content

Charts

Charts live on the canvas as regular objects. Move, resize, layer, and export them like any image or shape, and edit their data at any time.

Quick overview

  1. Open the Charts tab in the left panel.
  2. Click a chart type to insert it centered on the canvas with sample data.
  3. Select the chart to edit its data, labels, and colors in the properties panel.
  4. Add or remove data rows as your numbers change.
  5. Resize by dragging a handle. The chart re-renders at the new resolution instead of stretching.

Detailed reference

Chart types

TypeDefault sizeShape
Pie400x400Round
Doughnut400x400Round
Bar400x300Rectangular
Horizontal bar400x300Rectangular
Line400x300Rectangular
Radar400x400Round
Polar area400x400Round

Switching a chart's type afterward keeps your data and fills in extra colors as needed. Round types automatically square their width and height.

How it works

Each chart renders onto a hidden canvas at 4x resolution for crisp output, then bakes to a single image object on the canvas. Editing data, labels, or colors re-renders that image immediately, so what you see always matches the current numbers rather than a stretched raster.

Controls

ControlNotes
Type selectorChanges type without losing data
Dataset labelShown as the chart's title
Title font sizeThe size of the chart's title text
LegendShow or hide, position (top, bottom, left, right), font size
Axis label font sizeBar and line types only
BackgroundA solid color, or a transparent toggle to overlay the chart on other elements
Width / height100-2000 px, changing either re-renders immediately
Re-renderForces a fresh render if the image looks out of date

Data rows

Each data point is a row with a color swatch, a label, a numeric value, and a delete button. Add Row appends a new point using the next color from the default palette.

The default palette cycles through seven colors: a soft pink, a blue, a yellow, a teal, a mauve, a peach, and a lavender.

Resizing and reloading

Dragging a chart's handles updates its stored width and height and triggers a fresh high-resolution render, rather than stretching the existing image, so a chart stays sharp at any size. Chart type, data, labels, and size are saved with the design and rebuilt automatically the next time the project loads.

A chart behaves as one atomic object: image-editing tools like crop and background removal skip it rather than operating on the rendered image underneath.

Step by step

A bar chart from your own numbers

  1. Open the Charts tab and click Bar. It drops in centered with five sample columns.
  2. Keep it selected and open the properties panel. Each data point is a row with a color swatch, a label, and a value.
  3. Edit the labels and values in place. The chart re-renders on every keystroke, so the bars update as you type.
  4. Click Add Row to add a point (it takes the next palette color), or the row's X to remove one.
  5. Under the styling controls, set the Dataset label (it becomes the chart title), toggle the Legend and its position, and raise the Axis label font size if the labels are hard to read.

A pie or donut chart

  1. Click Pie or Doughnut in the Charts tab. Round types insert as a 400x400 square.
  2. Edit the rows so each slice has a clear label, value, and color.
  3. Move the Legend to the right or bottom, or hide it, so the slices are not crowded.
  4. To sit the chart over a photo or colored panel, turn on the transparent background toggle.

Compare two chart types side by side

  1. Build a chart and set its data.
  2. Press Ctrl+D to duplicate it.
  3. With the copy selected, change its Type in the properties panel (for example bar to line). Your data carries over, and any missing colors are filled from the palette.
  4. Place the two charts next to each other for a quick comparison from the same numbers.

Resize without blurring

  1. Select the chart and drag a corner handle to the size you want.
  2. Release. On release the chart re-renders at the new resolution rather than stretching the old image, so it stays crisp.
  3. For an exact size, type a Width and Height (100 to 2000 px) in the properties panel. If the numbers do not seem to refresh, click Re-render.

Common tasks

GoalHow
Add a data pointAdd Row, then type its label and value
Remove a pointClick the row's X
Title the chartType into Dataset label
Move the legendSet the legend position (top, bottom, left, right)
Overlay on other artTurn on the transparent background toggle
Bigger axis textRaise the axis label font size (bar and line only)
Change a slice colorEdit that row's color swatch

Troubleshooting

A blank row shows as zero

An empty value field counts as 0, so its bar or slice collapses to nothing. Delete rows you are not using instead of leaving them blank.

The pie looks squished after a type switch

Round types (pie, doughnut, radar, polar area) force their width and height equal. Switching a wide bar chart to a round type squares it up automatically, so its footprint changes.

The axis font size did nothing

The axis label font size only applies to bar and line charts. Pie, doughnut, radar, and polar area have no axes, so the control has no effect on them.

Crop and background removal skip the chart

A chart is one atomic object built from a live render, so image tools like crop and background removal pass over it. Edit the data, colors, and size in the properties panel instead.

Keep the series count low

The palette cycles through seven colors before repeating, and a dense chart is hard to read on a card or slide. A handful of clearly labeled points reads best.

Keyboard shortcuts

ShortcutAction
Ctrl+DDuplicate the selected chart
DeleteRemove the selected chart

Tips

Fewer series read better

A handful of clearly labeled segments reads better on a card or slide than a dense chart. Simplify the data before you resize the chart down.

Duplicate to compare

Duplicate a chart and switch the copy's type. A bar chart next to a line chart built from the same data makes a quick side-by-side comparison.