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
- Open the Charts tab in the left panel.
- Click a chart type to insert it centered on the canvas with sample data.
- Select the chart to edit its data, labels, and colors in the properties panel.
- Add or remove data rows as your numbers change.
- Resize by dragging a handle. The chart re-renders at the new resolution instead of stretching.
Detailed reference
Chart types
| Type | Default size | Shape |
|---|---|---|
| Pie | 400x400 | Round |
| Doughnut | 400x400 | Round |
| Bar | 400x300 | Rectangular |
| Horizontal bar | 400x300 | Rectangular |
| Line | 400x300 | Rectangular |
| Radar | 400x400 | Round |
| Polar area | 400x400 | Round |
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
| Control | Notes |
|---|---|
| Type selector | Changes type without losing data |
| Dataset label | Shown as the chart's title |
| Title font size | The size of the chart's title text |
| Legend | Show or hide, position (top, bottom, left, right), font size |
| Axis label font size | Bar and line types only |
| Background | A solid color, or a transparent toggle to overlay the chart on other elements |
| Width / height | 100-2000 px, changing either re-renders immediately |
| Re-render | Forces 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
- Open the Charts tab and click Bar. It drops in centered with five sample columns.
- Keep it selected and open the properties panel. Each data point is a row with a color swatch, a label, and a value.
- Edit the labels and values in place. The chart re-renders on every keystroke, so the bars update as you type.
- Click Add Row to add a point (it takes the next palette color), or the row's X to remove one.
- 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
- Click Pie or Doughnut in the Charts tab. Round types insert as a 400x400 square.
- Edit the rows so each slice has a clear label, value, and color.
- Move the Legend to the right or bottom, or hide it, so the slices are not crowded.
- To sit the chart over a photo or colored panel, turn on the transparent background toggle.
Compare two chart types side by side
- Build a chart and set its data.
- Press
Ctrl+Dto duplicate it. - 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.
- Place the two charts next to each other for a quick comparison from the same numbers.
Resize without blurring
- Select the chart and drag a corner handle to the size you want.
- Release. On release the chart re-renders at the new resolution rather than stretching the old image, so it stays crisp.
- 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
| Goal | How |
|---|---|
| Add a data point | Add Row, then type its label and value |
| Remove a point | Click the row's X |
| Title the chart | Type into Dataset label |
| Move the legend | Set the legend position (top, bottom, left, right) |
| Overlay on other art | Turn on the transparent background toggle |
| Bigger axis text | Raise the axis label font size (bar and line only) |
| Change a slice color | Edit 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
| Shortcut | Action |
|---|---|
Ctrl+D | Duplicate the selected chart |
Delete | Remove 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.
Related
- Shapes for other data-adjacent visuals
- Text and typography for chart captions and labels
- Export a page: charts export as part of the page's raster output