Sample code for the Data visualization component

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

JavaScript

{ 
'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); 
}

Embed the Data visualization component instance on the third-party website

Component properties for the Data visualization

Event handler in the Data visualization component

title	Sample code for the Data visualization component
description	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.
locale	en-US
canonical_url	https://www.servicenow.com/docs/r/australia/customer-service-management/customer-self-service-and-omnichannel-engagement/we-data-viz-sample-code.html
release	australia
product	Customer Self-service and Omnichannel Engagement
classification	customer-self-service-and-omnichannel-engagement
topic_type	reference
last_updated	2026-09-10
reading_time_minutes	1
breadcrumb	Data visualization componentConfigure web componentsConfigure Web EmbeddablesSet up self-serviceConfigureCustomer Service Management