Arrange the canvas
Widgets are positioned by hand. There is no auto-layout and no template, so the tidiness of a dashboard is entirely down to the grid and how carefully you use it.
Move and resize
Section titled “Move and resize”Drag a widget to move it. Drag its edge or corner to resize. Both snap to the grid, which keeps widgets aligned with each other.
The grid is 20 pixels by default. Change it from the grid control in the toolbar, which also sets whether the grid is drawn as dots or lines and what colour it is. A smaller grid gives you finer control but makes it harder to keep things aligned. 20 is a good default and there is rarely a reason to change it.
Select more than one
Section titled “Select more than one”Hold Shift and click to add widgets to the selection, then drag them together.
Shift does a second thing at the same time: it switches snapping off while held. So a Shift-drag moves the selection freely and lands wherever you release it, off-grid. Occasionally that is what you want; usually it is not. If a group has drifted out of alignment after a multi-select drag, this is why.
To move a group and keep the grid, position them individually, or move the group with Shift and then nudge each one back.
Zoom out, a percentage readout, and zoom in sit in the middle of the toolbar. Zoom changes what you see and never what is stored — a widget dragged at 50% zoom lands on the same grid coordinates it would have at 100%.
Zooming out is the quickest way to check whether a scroll dashboard has grown too long, or whether a fit dashboard actually fits.
Give charts enough room
Section titled “Give charts enough room”The most common layout mistake is making charts too small. A chart draws its title, axis labels, tick labels, and legend inside its own box, and when the box is small they overlap each other instead of shrinking to fit.
Some rough minimums, taken from the dashboards in these screenshots:
A chart with dated tick labels needs about 60 pixels of width per label. Eight months of data on a 1000-pixel-wide chart is comfortable; the same eight on a 400-pixel chart runs its dates together.
A bar chart needs roughly 500 pixels of width before its category labels stop colliding, and more if the categories are long words.
A pie chart puts its legend beside the pie, so it needs to be wider than it is tall — around 500 by 350 works, while a square one leaves the legend no room.
A KPI card is comfortable at 340 by 116 and legible down to about 200 wide.
If a chart looks wrong, make it bigger before you assume the data is at fault.
Copy and paste
Section titled “Copy and paste”Ctrl+C and Ctrl+V duplicate the selected widget with its binding and styling. This is the fastest way to build a row of KPI cards that match: get one right, paste it twice, and change only the bound column on each copy.
Ctrl+Z undoes, Ctrl+Y redoes, and the toolbar has buttons for both. The designer saves as you work and shows the save state next to the dashboard name — Unsaved changes while a change is pending, then nothing once it has been written.
Filter a dashboard adds controls readers can use. Designer toolbar lists every control across the top of the screen, including the ones this guide skipped.