Edit

Share via

HorizontalBarChart - Stacked control (preview)

  • Article

[This article is pre-release documentation and is subject to change.]

Horizontal stacked bar chart displays multiple series of data as stacked bars, with each bar representing a category. The bars are stacked alongside each other, with the length of each bar representing the value of the category of the series.

HorizontalBarChart - Stacked control.

This code component provides a wrapper around the Fluent UI HorizontalBarChart - Stacked control for use in canvas & custom pages.

Important

  • This is a preview feature.
  • Preview features aren’t meant for production use and may have restricted functionality. These features are available before an official release so that customers can get early access and provide feedback.

Note

For the full documentation and source code, see GitHub code components repository.

Properties

The control accepts the following properties:

  • HideLegend - This value denotes whether to show or hide legends on the chart.

  • BarHeight - This value denotes height of the bar presented in the chart.

  • HideTooltip - This option controls whether to show or hide tooltips on the chart.

  • CustomColors - This option is used to show custom colors on the chart if provided

  • Items - The action items to render

    • ItemTitle - The Display Name of the particular chart data(Item).
    • ItemKey - The key to use to identify the Item. The keys must be unique.
    • ItemValue - Set the value of the particular chart data(Item).
    • ItemColor - Set the color name or HEX value to be displayed for the particular chart data(Item).
    • ItemCallout - Set the value to be displayed on a popover/tooltip.

Note

Item color only applies if the CustomColors property is turned on.

Accessibility

  • AccessibilityLabel - Screen reader aria-label

Usage

Map data values to the corresponding chart properties in the Items property of the control, as demonstrated in the below formula. The chart automatically adjusts the visual to match the relative values.

Enable the CustomColors property to define consistent colors.

Table(
    {
        ItemKey: "1",
        ItemTitle: "First",
        ItemCallout:"First item callout title",
        ItemValue: 40,
        ItemColor: "#00A892"
    },
    {
        ItemKey: "2",
        ItemTitle: "Second",
        ItemCallout:"Second item callout title",
        ItemValue: 20,
        ItemColor: "#9A44FC"
    },
    {
        ItemKey: "3",
        ItemTitle: "Third",
        ItemCallout:"Third item callout title",
        ItemValue: 120,
        ItemColor: "#3483FA"
    },
    {
        ItemKey: "4",
        ItemTitle: "Fourth",
        ItemCallout:"Fourth item callout title",
        ItemValue: 90,
        ItemColor: "#EBA800"
    }
)

Limitations

This canvas component can only be used in canvas apps and custom pages.