---
sourceDocument: Australia Customer Service Management
sourceDocumentLink: https://www.servicenow.com/docs/r/customer-service-management

 Release :

    - australia

ft:locale :

    - en-US

ft:publication_title :

    - Australia Customer Service Management

ft:clusterId :

    - csm

bundleId :

    - csm

workflow :

    - Customer and Industry


---

# Sample code for the Data visualization component

# Sample code for the Data visualization component {#ariaid-title1}

* Release version: Australia
* 
* Updated March 12, 2026
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 minute to read

Sample code is provided to define an action when an event is triggered. Update the sample code for your use case before embedding the component on your webpage.

## Sample code {#we-data-viz-sample-code__section_qkd_lyn_c2c}

    { 

    'NOW_VIS_WRAPPER#PROPERTY_OVERRIDE' : (e) => { 

    // Dispatched when the visualization overrides its property. For example when the user selects a different group by from the alternative group by selection 

    var {properties} = e.detail.payload; 

    console.log(properties); 

    }, 

    'NOW_VIS_WRAPPER#SELECTED' : (e) => { 

    // Dispatched when the user selects/de-selects element on data visualizations, typically to filter other content on the page 

    var {title, type, isSelected, params, data} = e.detail.payload; 

    console.log(title, type, isSelected, params, data); 

    }, 

    'NOW_VIS_WRAPPER#CLICKED' : (e) => { 

    // Dispatched when the visualization is clicked 

    var {title, type, params, data} = e.detail.payload; 

    console.log(title, type, params, data); 

    }

**Related tasks**   

* [Configure the Data visualization component instance](https://www.servicenow.com/docs/dBMquRcztJZHqRFMr_nVfg "Configure the Data visualization component instance so that your users can embed it on their website to display information in the form of single score, pie chart, donut chart, or semi-donut chart directly from any ServiceNow table.")
* [Embed the Data visualization component instance on the third-party website](https://www.servicenow.com/docs/NfPJ90g9ryDggHYeM4do6A "Embed the global code and component code of the Data visualization component instance that you configured so that you can enable your customers to start using the Data visualization component instance on your third-party website.")  
**Related reference**   

* [Component properties for the Data visualization](https://www.servicenow.com/docs/6Ru52DDDDIcJNAMo7taaAA "Component properties enable you to configure the behavior of the Data visualization component instance on the third-party website.")
* [Event handler in the Data visualization component](https://www.servicenow.com/docs/2O1e4GchkeFf0EJOdnUyhg "A component triggers an event when a certain condition is met or on user interaction. The event can be used to execute an action through a code on a third-party webpage.")