---
schema_version: "1"
id: 5574bdd2a08282d18322c4c851efd150cc1bdb17983434c2ca2247f397218464
title: Customize the Step Chart Component (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_customize_the_step_chart_component.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_customize_the_step_chart_component.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 09b0287078b85f05b705950eeb00145d17c5e3f95c23b866b2fc005af888e20f
description: For the managed package runtime, add customizations to your Step Chart by extending the Step Chart Lightning web components, the StepChart component, and the Step Items component.
products:
  - Omnistudio
release: "264"
---
# Customize the Step Chart Component (Managed Package)

For the managed package runtime, add customizations to your Step Chart by extending the Step Chart Lightning web components, the StepChart component, and the Step Items component.

![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).

The stepChartItems Lightning web component contains logic that determines the different step statuses the step chart and its labels display. For information on extending Omniscript Lightning web components, see [Extend an Omniscript Element's Lightning Web Component (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_extend_an_omniscript_element_s_lightning_web_component.htm&release=264.0.0&type=5 "For the managed package runtime, add custom behavior and styling to an Omniscript element while maintaining its core functionality. Replace an Omniscript element’s Lightning web component with a component that re-creates its properties and adds new ones.").

1. Create a custom Step Chart Lightning web component that extends the stepChart Lightning web component. For more information, download the ReadMe [Omniscript ReadMe Reference (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_omniscript_readme_reference.htm&release=264.0.0&type=5 "For the managed package runtime, this page lists the Lightning web components ReadMes available for Omniscripts. Extend Lightning web components to add custom behavior and styling.").
    
    ![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
    
    Beginning Spring '22, to determine the current index for step chart items, pass the `current-step-index` API attribute into the **c-omniscript-step-chart-items** component .
2. Extend the stepChartItems Lightning web component in one of two ways:
    
    - Customize the stepChartItems LWC by creating an additional custom component that extends the stepChartItems LWC. For more information, download the ReadMe [Omniscript ReadMe Reference (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_omniscript_readme_reference.htm&release=264.0.0&type=5 "For the managed package runtime, this page lists the Lightning web components ReadMes available for Omniscripts. Extend Lightning web components to add custom behavior and styling.").
    - Extend the stepChartItems LWC directly in your custom Step Chart LWC. The default behavior and styling of the stepChartItems LWC will display in your custom Step Chart LWC.
3. (Optional) If a custom Step Chart Items LWC exists, extend that component in your custom Step Chart component.
4. After deploying custom LWCs to Salesforce, open an Omniscript.
5. In the Omniscript's Script Configuration properties, go to **Element Type To LWC Component Mapping**, and click **Add New Mapping**.
6. In the **Element Type** field, enter StepChart.
7. In the **Lightning Web Component** field, select your custom Lightning web component.
8. Activate the Omniscript, and preview your changes.