--- schema_version: "1" id: 476fd158cd6931a47bfffba2d2a2dcd8985d0c75aaddf7456b93010c63dea459 title: Add a Chart to a Flexcard (Managed Package) collection: admin version: current locale: en-us portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_add_a_chart_to_a_flexcard.md canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_add_a_chart_to_a_flexcard.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: bd7e066161bfb90516424050cee472197683555c32b3dcc4ab503997880fe0ad description: For the managed package runtime, display data on a Flexcard as a chart with the Chart element. Select from bar, pie, donut, line, and radar chart types. products: - Omnistudio release: "264" --- # Add a Chart to a Flexcard (Managed Package) For the managed package runtime, display data on a Flexcard as a chart with the Chart element. Select from bar, pie, donut, line, and radar chart types. ![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). ![FlexCard Chart Element](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/flexcard_chart_element.png) 1. From the Flexcards tab, click a version of a Flexcard to open the Flexcard Designer. 2. Drag a **Chart** element from the Build panel into a state on the canvas. 3. (Optional) From the Properties panel, update the element name in the **Element Name** field. 4. (Optional) To display a title at the top of the chart, which is hidden by default, update these properties: - In the **Title** field, enter a title for the chart. - Make sure **Hide Header** isn’t selected. 5. From the **Type** dropdown, select the type of chart to display. 6. (Optional) To adjust your chart's proportions, update the **Aspect Ratio**. See [Flexcard Chart Element Aspect Ratio (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcard_chart_element_aspect_ratio.htm&release=264.0.0&type=5 "For the managed package runtime, you can adjust the proportions of a Chart element with the Aspect Ratio, Maintain Aspect Ratio, and Chart Height features in the Flexcard Designer. Set the Aspect Ratio to adjust height relative to the width. Set fixed proportions. Or, override the aspect ratio and set a fixed height."). 7. (Optional) To manually set the height, overriding the **Aspect Ratio**, enter a number in the **Chart Height** field. The height is in pixels, such as 300px. You can enter just the number without the 'px' suffix, such as 300. ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/images/icon_note.png) Note This feature is visible when the **Maintain Aspect Ratio** feature is disabled. 8. From the **Label Node** dropdown, select the field whose values are used to categorize the data, such as Name to display Account names. 9. From the **Value Node** dropdown, select the field whose values are used to populate the chart, such as AnnualRevenue. ![Important](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/images/icon_important.png) Important The values must be numbers and have the same count as the field selected in **Label Node**. 10. Select the color scheme for your chart from the **Color Palette** dropdown. ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/images/icon_note.png) Note Each color palette has up to 6 unique colors. If there are more than 6 values in your chart, the colors repeat from the beginning. 11. (Optional) To add conditions that must be met for the element to display, see [Add Conditions to a Flexcard Element (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_add_conditions_to_a_flexcard_element.htm&release=264.0.0&type=5 "For the managed package runtime, display or hide data based on the value of a data field. For example, display an alert icon or supplemental text for escalated Cases. Apply conditions to any element listed in the Build panel of the Flexcard Designer."). 12. (Optional) To style your element, click **Style** to open the Style panel, and see [Style Flexcard Elements (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_style_flexcard_elements.htm&release=264.0.0&type=5 "For the managed package runtime, configure the look and feel of a Flexcard by styling individual elements, fields inside elements, and entire states. From the Style panel in the Flexcard Designer, design backgrounds, text, and borders; adjust heights, widths, and spacing inside and between elements; apply classes and inline styles; make your element responsive; and more."). What’s next: Preview your Flexcard. See [Preview a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_preview_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, preview your Flexcard's appearance and functionality before publishing it to a Lightning page or Experience Builder site. In Preview, test how your Flexcard looks on multiple devices and test the functionality of action links and other interactive elements."). - **[Flexcard Chart Element Aspect Ratio (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcard_chart_element_aspect_ratio.htm&release=264.0.0&type=5)** For the managed package runtime, you can adjust the proportions of a Chart element with the Aspect Ratio, Maintain Aspect Ratio, and Chart Height features in the Flexcard Designer. Set the Aspect Ratio to adjust height relative to the width. Set fixed proportions. Or, override the aspect ratio and set a fixed height. - **[Flexcards Chart Properties (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_chart_properties.htm&release=264.0.0&type=5)** 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.