---
schema_version: "1"
id: 710618826b750725a19d20984dc40ce40b8cc0e6cdf1374621fda280f8520d1c
title: Flexcards Chart Properties (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_flexcards_chart_properties.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_chart_properties.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 2f6cc30d98978287fca6ef5b954fed5ed09ab44aafc99d8f0bcca5d64224f3f5
description: For the managed package runtime, chart element properties are configurable in the Property Panel when you select a Chart element in the Flexcard Designer. With the Chart element, display data as a chart and enable users to perform actions within the chart.
products:
  - Omnistudio
release: "264"
---
# Flexcards Chart Properties (Managed Package)

For the managed package runtime, chart element properties are configurable in the Property Panel when you select a Chart element in the Flexcard Designer. With the Chart element, display data as a chart and enable users to perform actions within the chart.

![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US).

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
      <colgroup>
        <col>
        <col>
        <col>
      </colgroup>
      <thead class="slds-text-title_caps ">
        <tr class="">
          <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d42886e47">
            <p style="margin-bottom:0;">Property</p>
          </th>
          <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d42886e53">
            <p style="margin-bottom:0;">Description</p>
          </th>
          <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d42886e59">
            <p style="margin-bottom:0;">Reference</p>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr class="">
          <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d42886e47 ">
            <p style="margin-bottom:0;">Accessibility Support</p>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d42886e53 ">
            <p style="margin-bottom:0;">Display a textual description of the chart as an accessible HTML table inside a collapsible block below the chart.</p>
          </td>

          <td data-label="Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d42886e59 ">
            <p style="margin-bottom:0;">n/a</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d42886e47 ">
            <p style="margin-bottom:0;">Aspect Ratio</p>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d42886e53 ">
            <p style="margin-bottom:0;">Enter a number to set the height relative to the width. For example, if the Aspect Ratio is 2, and the default width and height is 600px and 300px, the width remains the same and the height is half the default height at 150px.</p>
          </td>

          <td data-label="Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d42886e59 ">

          </td>

        </tr>
        <tr class="">
          <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d42886e47 ">
            <p style="margin-bottom:0;">Chart Height</p>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d42886e53 ">
            <p style="margin-bottom:0;">Manually set the height of the chart, which overrides the <strong class="uicontrol">Aspect Ratio</strong> and is visible when the <strong class="uicontrol">Maintain Aspect Ratio</strong> feature is disabled.</p>
          </td>

          <td data-label="Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d42886e59 ">

          </td>

        </tr>
        <tr class="">
          <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d42886e47 ">
            <p style="margin-bottom:0;">Color Palette</p>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d42886e53 ">
            <p style="margin-bottom:0;">Select a predefined color scheme.</p>
          </td>

          <td data-label="Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d42886e59 ">
            <p style="margin-bottom:0;">n/a</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d42886e47 ">
            <p style="margin-bottom:0;">Conditions</p>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d42886e53 ">
            <p style="margin-bottom:0;">Add a condition that must be met for the element to display.</p>
          </td>

          <td data-label="Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d42886e59 ">

          </td>

        </tr>
        <tr class="">
          <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d42886e47 ">
            <p style="margin-bottom:0;">Cutout Percentage</p>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d42886e53 ">
            <p style="margin-bottom:0;">Enter the size of the donut chart hole by percentage.</p>
          </td>

          <td data-label="Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d42886e59 ">
            <p style="margin-bottom:0;">n/a</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d42886e47 ">
            <p style="margin-bottom:0;">Element Name</p>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d42886e53 ">
            <p style="margin-bottom:0;">The name of the element as seen on the canvas. Used to distinguish one element from another as you build your Flexcard in the designer. Is used only within the designer.</p>
          </td>

          <td data-label="Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d42886e59 ">

          </td>

        </tr>
        <tr class="">
          <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d42886e47 ">
            <p style="margin-bottom:0;">Hide Header</p>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d42886e53 ">
            <p style="margin-bottom:0;">Show or hide the chart's title.</p>
          </td>

          <td data-label="Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d42886e59 ">
            <p style="margin-bottom:0;">n/a</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d42886e47 ">
            <p style="margin-bottom:0;">Label Node</p>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d42886e53 ">
            <p style="margin-bottom:0;">Select the field whose values are used to categorize the data, such as <kbd>Name</kbd> of Accounts.</p>
          </td>

          <td data-label="Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d42886e59 ">
            <p style="margin-bottom:0;">n/a</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d42886e47 ">
            <p style="margin-bottom:0;">Maintain Aspect Ratio</p>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d42886e53 ">
            <p style="margin-bottom:0;">Maintain the aspect ratio so that the width and height are a fixed proportion. For example, if the <strong class="uicontrol">Aspect Ratio</strong> is 2, and the width is 600px, then the height is 300px.</p>
          </td>

          <td data-label="Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d42886e59 ">

          </td>

        </tr>
        <tr class="">
          <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d42886e47 ">
            <p style="margin-bottom:0;">Title</p>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d42886e53 ">
            <p style="margin-bottom:0;">Displays a title above the chart when <strong class="uicontrol">Hide Header</strong> is disabled.</p>
          </td>

          <td data-label="Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d42886e59 ">
            <p style="margin-bottom:0;">n/a</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d42886e47 ">
            <p style="margin-bottom:0;">Type</p>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d42886e53 ">
            <p style="margin-bottom:0;">Select the type of chart to display.</p>
          </td>

          <td data-label="Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d42886e59 ">
            <p style="margin-bottom:0;">n/a</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d42886e47 ">
            <p style="margin-bottom:0;">Value Node</p>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d42886e53 ">
            <p style="margin-bottom:0;">Select the values to populate the chart, such as <kbd>AnnualRevenue</kbd> for Accounts.</p>
          </td>

          <td data-label="Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d42886e59 ">
            <p style="margin-bottom:0;">n/a</p>
          </td>

        </tr>
      </tbody>
    </table>