Design Canvas Layouts to View on Different Devices

You can create canvas breakpoints to determine how visualizations display to consumer users on devices with different screen sizes. For example, you can set different breakpoints to optimize viewing on a mobile device browser, a tablet, or a laptop.

Tutorial icon Tutorial

  1. On the Home page, hover over a workbook, click Actions, then select Open.
  2. Click Edit to display the workbook for editing.
  3. Expand the canvas to maximum size and in Canvas Properties, set the Layout to Autofit, and click OK.
  4. On the footer click Responsive Canvas Editor to open the editor where you can define breakpoints to view the canvas on different devices.
    Responsive Canvas Editor

  5. Set a canvas breakpoint:
    • Add a breakpoint at the current slider position - Click and drag the slider to the value in pixels for the screen size that you want to use for this breakpoint,
      Drag the slider to the required width shown in pixels.

      then click Add Breakpoint Click the Add Breakpoint icon to add a breakpoint where the slider is locatedto add the breakpoint at the current slider location.
    • Manually enter a value for a breakpoint - Click Open the Responsive Canvas Editor Menu, click Add Breakpoint and enter a number in the Position field for where you want this breakpoint.
      Enter a position manually to add a breakpoint

  6. Repeat the previous step to define additional canvas breakpoints.
  7. Include or exclude visualizations for each canvas breakpoint:
    • Right-click the canvas breakpoint that you want to manage (A canvas breakpoint and its marker) and click Manage Breakpoint.
      Use the Manage Breakpoint dialog to include or exclude visualizations from this canvas breakpoint.

    • Click a visualization from the list to exclude or include in the canvas for this canvas breakpoint, then click OK.
      Use the Manage Breakpoint dialog to exclude or include visualizations and dashboard filters from the canvas for this breakpoint.

  8. Optional: Create a visualization and add it to a breakpoint by selecting data from the Data pane, and adding it to the canvas.
    The new visualization is added to the current breakpoint only, however you can add the visualization to other breakpoints on the canvas by selecting the visualization from the list in the Manage Breakpoint dialog for that breakpoint.
  9. Optional: Optimize the display of visualizations for a canvas breakpoint.
    You might want to optimize the content to display on a smaller device, such as a mobile.
    • Rearrange visualizations - Click and drag visualizations to a new position.
    • Optimize visualizations - Use the Properties pane to hide unnecessary content, such as the title, or the legend.
    When you optimize visualizations for a breakpoint those changes don't apply to other breakpoints in the canvas.
  10. Click Save.