How to create mobile-friendly Power BI visuals

Mobile devices allow users to connect to their data anytime and anywhere.

Power BI apps for Windows, iOS, and Android enable business users to have a comprehensive view of their data that's always at their fingertips.

As a developer creating Power BI visuals, you must address the unique constraints of each mobile device to reach as many users as possible and provide the best mobile experience.

Required functionality

The following requirements are essential for developing mobile-friendly visuals:

• Rendering

  A Power BI visual has to render on all supported mobile devices, including browsers and applications. There should be no errors in reports and dashboards, or when visuals run in Focus mode.

• Interactivity

  Mobile devices should have the same interactive functionality as desktop devices. All events handled on desktop browsers must be supported, or have comparable event handlers, on mobile devices.

  For example, if a desktop visual supports multi-selection using the Ctrl key, consider adding a similar event handler for mobile devices.

  The following table provides a list of corresponding events on mobile devices.

  Mouse event name	Touch event name
  click	click
  mousemove	touchmove
  mousedown	touchstart
  mouseup	touchend
  dblclick	external library
  contextmenu	external library
  mouseover	touchmove
  mouseout	touchmove (or external library)
  wheel	N/A

  Note

  Not all mobile or touch screen devices support mouse (or mouse prefixed) events. In unsupported cases, handle both mouse and touch events at the same time.

Optional functionality

The following functions are optional. The optional functions can be used to create a better end-user experience.

• Recommended rendering

  To support smaller visual sizes, add format options that allow the user to adjust the size of each element. For example, add format options to labels to use in reports and dashboards. The format options allow users to customize a visual specifically for their mobile device.

  The same settings can be applied to the visuals in desktop browsers and, if needed, be overridden to adapt the visual to smaller screens.

  Note

  To optimize a visual in Focus mode, both portrait and landscape screen size orientations should be considered. See Display content in Focus mode.

• Recommended interactivity

  Consider adding mobile-specific event handlers, like dragging and scrolling.

• Failover

  If a visual can't render on a mobile device, the visual should show a descriptive error.

Supported browsers and devices

Power BI visuals must render on all devices that support Power BI apps. For more information, see supported browsers for Power BI and Power BI mobile apps.

Related content

Develop a Power BI circle card visual