Canvas

The canvas is the core of Dashboardx Designer's design perspective — a flexible and intuitive workspace where you can arrange components, create layouts, and bring data visualizations to life. This chapter will help you master canvas operations to achieve professional dashboard design.

On Windows, press `Ctrl` where this page shows `⌘`, and `Ctrl+Shift` where it shows `⌘⇧`.

What is the Canvas?

The canvas is an infinite workspace where you can:

• Select components for rotation, scaling, and translation
• Arrange components into any layout you imagine
• Use smart guides for precise alignment
• Enable grid snapping for intelligent component snapping alignment
• Use multi-component alignment for horizontal left alignment, center alignment, and right alignment, or for vertical top alignment, center alignment, and bottom alignment, or for horizontal uniform distribution and vertical uniform distribution
• Lock components to avoid accidental touches during layout
• Switch themes to apply consistent styles across the entire dashboard

Canvas Basics

• Entering the Canvas

  1. Click the Design Perspective icon in the left sidebar
  2. The canvas will be displayed as the main view, appearing as a grid-based workspace with the global toolbar at the top

• Canvas Navigation

  • Zoom: Use ⌘+ and ⌘-
  • Pan: Mouse click on blank canvas area and drag
  • Fit to Window: In the global toolbar, you can choose "Fit to Window", "Fit to Height", and "Fit to Width"
  • Reset Window: Click 100% in the zoom control selection

💡 Tip

When the canvas is selected, you can set properties such as resolution, background color, and background image in the Properties panel.

Tools and Functions

1. Selection Tools

   • Single Selection: Click any component to select
   • Multiple Selection: Shift+Click multiple components
   • Deselect: Click blank canvas area or press Esc

2. Alignment and Distribution

   Dashboardx Designer provides intelligent alignment tools:

   1. Alignment Guides: Click and drag from horizontal or vertical rulers to the canvas to generate alignment guides
   2. Smart Guides: Automatically display alignment guides when dragging components
   3. Manual Alignment: Use the alignment toolbar in the global toolbar for precise control
   4. Distribution: Perform equal spacing adjustment between multiple selected components
   5. Snap Grid: Enable grid snapping in the global toolbar; components can precisely snap to fixed grids

Theme Operations

The system has built-in light and dark theme types, each providing eight themes. Users can switch themes as needed through the theme switcher selector on the global toolbar.

Component Management

1. Adding Components

   1. Drag any component from the Widgets panel to the canvas
   2. Copy Existing: ⌘C to copy selected component, click on blank area of canvas, ⌘V to complete paste

2. Positioning Components

   • Drag and Drop: Click and drag component to desired position
   • Properties Panel: Enter precise X/Y coordinates under the coordinates tab for accurate positioning

3. Resizing Components

   • Drag Handles: Use corner handles to resize proportionally
   • Side Handles: Resize only horizontally or vertically

4. Locking and Layer Management

   • Lock Component: Select component and click lock button on global toolbar, or right-click component to activate context menu, then click lock menu item
   • Unlock: Select locked component, can click unlock button on global toolbar, or right-click component to activate context menu, then click unlock menu item
   • Layer Management: Right-click component > "Bring to Front", "Bring Forward", "Send Backward" or "Send to Back"

Layout Strategies

The following are several typical layout strategies that can be referenced when designing dashboards.

1. Grid Layout

┌───────┬───────┬───────┐
│   A   │   B   │   C   │
├───────┼───────┼───────┤
│   D   │   E   │   F   │
└───────┴───────┴───────┘

• Used for balanced, symmetrical designs
• Suitable for dashboards with components of equal importance

2. Focus Layout

┌───────────────┬───────┐
│               │   B   │
│               ├───────┤
│      A        │   C   │
│               ├───────┤
│               │   D   │
└───────────────┴───────┘

• Emphasizes main visualization (A)
• Sidebar for supporting metrics (B, C, D)

3. Hierarchical Layout

┌───────────────────────┐
│          A            │
├───────────┬───────────┤
│     B     │     C     │
├─────┬─────┼─────┬─────┤
│  D  │  E  │  F  │  G  │
└─────┴─────┴─────┴─────┘

• Visually displays data hierarchy
• Suitable for drill-down scenarios

Advanced Canvas Features

1. Templates

   • Apply Template: Apply template to new dashboard, click menu File > New from Template, then select appropriate template to create new dashboard.

2. Canvas Background

   • Solid Color: Choose any background color
   • Image: Upload custom background image
   • Transparency: Adjust canvas transparency for overlay effects

3. Guides and Rulers

   • Custom Guides: Drag from rulers to create custom alignment guides
   • Clear Guides: Drag guides back to rulers to delete guides
   • Hide Guides: Click image button at intersection of horizontal and vertical rulers to hide or show all guides

Handling Large Dashboards

Navigation Aids

• Zoom settings: Quick zoom control in toolbar

Organization Tools

• Hierarchy Panel: Visual hierarchy of all canvas components
• Widgets Panel: All components in collapsible list
• Search Components: Find components by name, both Hierarchy panel and Widgets panel support component search

Canvas Design Best Practices

1. Start with Wireframes

   • Sketch layout on paper or using digital wireframing tools
   • Consider user flow and information hierarchy

2. Use Consistent Spacing

   • Establish spacing system (e.g., 8px grid), enable Snap Grid in global toolbar
   • Use distribution tools to achieve equal spacing
   • Maintain consistent padding around components

3. Group Related Content

   • Group components that tell related stories
   • Use visual separation to distinguish unrelated groups
   • Consider using containers or background colors for grouping

4. Consider Reading Patterns

   • Most audiences read from left to right, top to bottom
   • Place most important information in top-left quadrant
   • Use visual weight to guide attention

5. Leave White Space

   • Do not overcrowd the canvas
   • White space improves readability and focus
   • Use margins and padding effectively

Common Canvas Issues and Solutions

1. Problem: Components Cannot Align

   Solution:

   • Check if "Snap Grid" is enabled
   • Use alignment tools in toolbar
   • Ensure components are not accidentally locked

2. Problem: Canvas Performance is Slow

   Solution:

   • Reduce number of components on canvas
   • Simplify complex visualizations
   • Use symbols for repeated elements
   • Close other applications to free memory

3. Problem: Accidentally Moved Background Elements

   Solution:

   • Lock background elements (right-click > "Lock")
   • Use Hierarchy panel to manage element hierarchy
   • ⌘Z to undo accidental movements

4. Problem: Components Show No Data

   Solution:

   • Check if data binding and dataset filtering are correct

Integration with Other Perspectives

From Data Perspective to Canvas

1. Create datasets in Data Perspective
2. Switch to Design Perspective
3. Bind dataset fields to components in Dataset Binding panel

From Canvas to Presenting

1. Design layout in canvas
2. Click Present in the global toolbar — the dashboard opens in your browser, served from your machine
3. Test interactivity and user experience
4. Return to canvas for adjustments

Next Steps

Now that you understand the canvas, you can:

1. Explore Components: Learn about different types of visualization elements in the Components chapter
2. Master Data Binding: See how to connect data to components in the Data Binding chapter
3. Test Interactivity: See how your canvas design behaves when you present it

---

Remember: The canvas is your creative playground. Don't be afraid to try different layouts and arrangements. The undo button (⌘Z) is always there to rescue you from any design missteps!

Happy designing! 🎨

Chart Sizes Follow the Canvas

Change the canvas size — Properties → General → Dimensions, where you pick a size such as Full HD — and every chart on it resizes to match, so you never have to nudge charts one by one after changing the page size.

A chart you have resized by hand keeps your size. Auto-resize only kicks back in when you change the canvas size again, so a deliberate manual adjustment is not quietly undone.

Themes

The theme is set once for the canvas and every widget picks it up — colours, text, and backgrounds all follow it. Pick one in Properties → General → Theme, or ask the Dashboard Stylist for it in conversation ("make this one dark, for the wall display"). Changing the theme does not touch your data or your layout.

Floating panels on the canvas follow the canvas theme, so a dark dashboard does not blind you with a white context menu; the application's own menus keep the application's appearance. See Settings → Appearance.

The Grid Things Snap To

Widget positions snap to an 8-pixel grid, which is what makes a hand-built layout look tidy without you measuring anything:

What	Value
Snap unit	8 px
Canvas left / right margin	16 px
Canvas top / bottom margin	8 px
Widget size	free — drag to any size you want

Positions snap; sizes do not, so you can still make one chart a little larger than its neighbours. Auto-arrange uses the same grid, which is why arranged and hand-placed widgets sit together cleanly.

Where to go next

• Widgets — widget types and KPI
• Properties — the property editor
• Visual Design — themes and colour