Edit

Pie chart control in Power Apps

  • Article

A control that shows relative values in comparison to each other.

Description

Add a Pie chart control if you want to show relative data from a table that contains labels in the leftmost column and values in the second column from the left.

This control is a grouped control containing three controls: a Label for the title, the chart graphic, and a Legend.

Chart key properties

Items – The source of data that appears in a control such as a gallery, a list, or a chart.

ShowLabels – Whether a pie chart shows the value that's associated with each of its wedges.

Additional chart properties

BorderColor – The color of a control's border.

BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.

BorderThickness – The thickness of a control's border.

Color – The color of text in a control.

DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).

DisabledBorderColor – The color of a control's border if the control's DisplayMode property is set to Disabled.

Explode – The distance between wedges in a pie chart.

Font – The name of the family of fonts in which text appears.

Height – The distance between a control's top and bottom edges.

HoverBorderColor – The color of a control's border when the user keeps the mouse pointer on that control.

ItemBorderColor – The color of the border around each wedge in a pie chart.

ItemBorderThickness – The thickness of the border around each wedge in a pie chart.

ItemColorSet – The color of each data point in a chart.

LabelPosition – The location of labels in a pie chart relative to its wedges.

OnSelect – Actions to perform when the user taps or clicks a control.

PressedBorderColor – The color of a control's border when the user taps or clicks that control.

Size – The font size of the text that appears on a control.

TabIndex – Keyboard navigation order in relation to other controls.

Visible – Whether a control appears or is hidden.

Width – The distance between a control's left and right edges.

X – The distance between the left edge of a control and the left edge of its parent container (screen if no parent container).

Y – The distance between the top edge of a control and the top edge of the parent container (screen if no parent container).

Max( DataSource, ColumnName )

Example

  1. Add a Button control, and set its OnSelect property to this formula:
    Collect(Revenue2015, {Product:"Europa", Revenue:27000}, {Product:"Ganymede", Revenue:26300}, {Product:"Callisto", Revenue:29200})

    Don't know how to add and configure a control?

    Want more information about the Collect function or other functions?

  2. Press F5, click or tap the Button control, and then press Esc to return to the default workspace.

  3. Add a Pie chart control, and set its Items property to Revenue2015.

    The Pie chart control shows revenue data for each product in relation to the other products.

Accessibility guidelines

Color contrast

There must be adequate color contrast between:

  • each item in ItemColorSet
  • every item in ItemColorSet and the background color
  • Color and the background color

Screen reader support

  • There must be a Label immediately before the chart graphic to serve as the title.

    Note

    Chart graphics and Legend are hidden from screen reader users. As an alternative, a tabular form of the data is presented to them. They can also cycle through buttons that select data in the chart.

Low vision support

  • There must be a Legend.
  • Consider setting ShowLabels to true. This helps low-vision users quickly determine what each pie slice represents.
  • Consider setting LabelPosition to LabelPosition.Outside. This increases legibility of labels because of a more consistent color contrast.

Keyboard support

  • TabIndex must be zero or greater so that keyboard users can navigate to it.

    Note

    When keyboard users navigate to the chart, they can cycle through buttons that select data in the chart.