Component properties for the Data visualization
Component properties enable you to configure the behavior of the Data visualization component instance on the third-party website.
|
Component property |
Description |
|---|---|
|
Data visualization type |
Display type of data visualization chart for the component. |
|
Show header |
Option to display the visualization header, including title and icons. |
|
Show header separator |
Option to display a line separating the header from the rest of the component. |
|
Chart title |
Title for the visualization. |
|
Description |
Description for your component. |
|
Wrap title |
Option to wrap long titles onto a second line. If cleared, an ellipsis is displayed to truncate the long title. |
|
Show border |
Option to display a line around the component. |
|
Sort by |
Sorts groups or categories in the specified order. Currently, you can sort by value or name. |
|
Sort by order |
Sorts groups or categories in ascending or descending order. |
|
Show total value |
Option to show the total value.This field doesn’t apply to pie chart. |
|
Show metric label |
Option to show the metric label. This field doesn’t apply to pie chart. |
|
Drill down label |
Text displayed in the tooltip to help users understand what will happen upon selecting. |
|
Show selected data point |
Option to show the data point that has been selected. It’s commonly used when the chart functions as a filter. |
|
Refresh requested |
A value that triggers a data refresh. The refresh occurs only if the new value of this property is different from the previous one. |
|
Show legend |
Option to display the legend. |
|
Show legend value |
Option to display the value corresponding to the area of the chart you hover on. The value is displayed as a tooltip and in the chart legend. |
|
Legend position |
Position of the legend relative to the chart. Currently, you can set the location to above, below, right, or left. |
|
Legend orientation |
The orientation of the legend. Currently, you set it either horizontal or vertical. |
|
Horizontal alignment |
The horizontal alignment of elements in the legend. Currently, you can set it to start, center, or end. |
|
Max legend item width, px |
Defines number of pixels after which the item of the legend will be truncated. |
|
Expand legend vertically |
Option that enables the legend to expand as needed to fit the content without scrolling, instead of being limited to two lines. |
|
Show data labels |
Option to display the score of each data point. |
|
Set color type |
Determines the color for the chart. You can set color type to default, color palette, or fixed element color. |
|
Component property |
Description |
|---|---|
|
Data visualization type |
Display type of data visualization chart for the component. |
|
Show header |
Option to display the visualization header, including title and icons. |
|
Show header separator |
Option to display a line separating the header from the rest of the component. |
|
Chart title |
Title for the visualization chart. |
|
Description |
Description for your component. |
|
Wrap title |
Option to wrap long titles onto a second line. If unchecked, an ellipsis is displayed to truncate the long title. |
|
Show border |
Option to display a line around the component. |
|
Sort by |
Sorts groups or categories in the specified order. Currently, you can sort by value or name. |
|
Sort by order |
Sorts groups or categories in ascending or descending order. |
|
Show total value |
Option to show the total value. |
|
Show metric label |
Option to display the metric label. |
|
Show score update time |
Option to display the time of the last update of the single score. |
|
Show 0 when no data available |
Option to display format when there’s no value in the selected dataset or configuration. |
|
Refresh requested |
A value that triggers a data refresh. The refresh occurs only if the new value of this property is different from the previous one. |
|
Score size |
Size of the score. Currently, you can set size to auto, xs, s, m, l, xl, or xxl. |
|
Score icon |
An icon is to be shown in front of the score value. You can either search from the available images or upload custom images. |
|
Alignment |
Add icon to be shown in front of the score value |
|
Set color type |
Determines the color for the chart. You can set color type to default, or single color. |
Configure the Data visualization component instance
Embed the Data visualization component instance on the third-party website
--- title: Component properties for the Data visualization description: Component properties enable you to configure the behavior of the Data visualization component instance on the third-party website. locale: en-US canonical_url: https://www.servicenow.com/docs/r/customer-service-management/we-data-viz-comp-prop.html release: brazil topic_type: reference last_updated: "2026-09-10" reading_time_minutes: 4 breadcrumb: [Web Embeddables component properties, Web Embeddables reference, Reference, Customer Service Management] --- # Component properties for the Data visualization Component properties enable you to configure the behavior of the Data visualization component instance on the third-party website. <table id="table_csm_base_entities"><thead><tr><th> Component property </th><th> Description </th></tr></thead><tbody><tr><td> Data visualization type </td><td> Display type of data visualization chart for the component. </td></tr><tr><td> Show header </td><td> Option to display the visualization header, including title and icons. </td></tr><tr><td> Show header separator </td><td> Option to display a line separating the header from the rest of the component. </td></tr><tr><td> Chart title </td><td> Title for the visualization. </td></tr><tr><td> Description </td><td> Description for your component. </td></tr><tr><td> Wrap title </td><td> Option to wrap long titles onto a second line. If cleared, an ellipsis is displayed to truncate the long title. </td></tr><tr><td> Show border </td><td> Option to display a line around the component. </td></tr><tr><td> Sort by </td><td> Sorts groups or categories in the specified order. Currently, you can sort by value or name. </td></tr><tr><td> Sort by order </td><td> Sorts groups or categories in ascending or descending order. </td></tr><tr><td> Show total value </td><td> Option to show the total value.This field doesn’t apply to pie chart. </td></tr><tr><td> Show metric label </td><td> Option to show the metric label. This field doesn’t apply to pie chart. </td></tr><tr><td> Drill down label </td><td> Text displayed in the tooltip to help users understand what will happen upon selecting. </td></tr><tr><td> Show selected data point </td><td> Option to show the data point that has been selected. It’s commonly used when the chart functions as a filter. </td></tr><tr><td> Refresh requested </td><td> A value that triggers a data refresh. The refresh occurs only if the new value of this property is different from the previous one. </td></tr><tr><td> Show legend </td><td> Option to display the legend. </td></tr><tr><td> Show legend value </td><td> Option to display the value corresponding to the area of the chart you hover on. The value is displayed as a tooltip and in the chart legend. </td></tr><tr><td> Legend position </td><td> Position of the legend relative to the chart. Currently, you can set the location to above, below, right, or left. </td></tr><tr><td> Legend orientation </td><td> The orientation of the legend. Currently, you set it either horizontal or vertical. </td></tr><tr><td> Horizontal alignment </td><td> The horizontal alignment of elements in the legend. Currently, you can set it to start, center, or end. </td></tr><tr><td> Max legend item width, px </td><td> Defines number of pixels after which the item of the legend will be truncated. </td></tr><tr><td> Expand legend vertically </td><td> Option that enables the legend to expand as needed to fit the content without scrolling, instead of being limited to two lines. </td></tr><tr><td> Show data labels </td><td> Option to display the score of each data point. </td></tr><tr><td> Set color type </td><td> Determines the color for the chart. You can set color type to default, color palette, or fixed element color. </td></tr></tbody> </table><table id="table_ksy_mdw_c2c"><thead><tr><th> Component property </th><th> Description </th></tr></thead><tbody><tr><td> Data visualization type </td><td> Display type of data visualization chart for the component. </td></tr><tr><td> Show header </td><td> Option to display the visualization header, including title and icons. </td></tr><tr><td> Show header separator </td><td> Option to display a line separating the header from the rest of the component. </td></tr><tr><td> Chart title </td><td> Title for the visualization chart. </td></tr><tr><td> Description </td><td> Description for your component. </td></tr><tr><td> Wrap title </td><td> Option to wrap long titles onto a second line. If unchecked, an ellipsis is displayed to truncate the long title. </td></tr><tr><td> Show border </td><td> Option to display a line around the component. </td></tr><tr><td> Sort by </td><td> Sorts groups or categories in the specified order. Currently, you can sort by value or name. </td></tr><tr><td> Sort by order </td><td> Sorts groups or categories in ascending or descending order. </td></tr><tr><td> Show total value </td><td> Option to show the total value. </td></tr><tr><td> Show metric label </td><td> Option to display the metric label. </td></tr><tr><td> Show score update time </td><td> Option to display the time of the last update of the single score. </td></tr><tr><td> Show 0 when no data available </td><td> Option to display format when there’s no value in the selected dataset or configuration. </td></tr><tr><td> Refresh requested </td><td> A value that triggers a data refresh. The refresh occurs only if the new value of this property is different from the previous one. </td></tr><tr><td> Score size </td><td> Size of the score. Currently, you can set size to auto, xs, s, m, l, xl, or xxl. </td></tr><tr><td> Score icon </td><td> An icon is to be shown in front of the score value. You can either search from the available images or upload custom images. </td></tr><tr><td> Alignment </td><td> Add icon to be shown in front of the score value </td></tr><tr><td> Set color type </td><td> Determines the color for the chart. You can set color type to default, or single color. </td></tr></tbody> </table>**Related topics** [Configure the Data visualization component instance](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/brazil/markdown/customer-service-management/customer-self-service-and-omnichannel-engagement/config-data-viz-comp.md) [Embed the Data visualization component instance on the third-party website](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/brazil/markdown/customer-service-management/customer-self-service-and-omnichannel-engagement/embed-data-viz-comp.md) [Event handler in the Data visualization component](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/brazil/markdown/customer-service-management/we-data-viz-event-handler.md) [Sample code for the Data visualization component](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/brazil/markdown/customer-service-management/customer-self-service-and-omnichannel-engagement/we-data-viz-sample-code.md)
| title | Component properties for the Data visualization |
| description | Component properties enable you to configure the behavior of the Data visualization component instance on the third-party website. |
| locale | en-US |
| canonical_url | https://www.servicenow.com/docs/r/customer-service-management/we-data-viz-comp-prop.html |
| release | brazil |
| topic_type | reference |
| last_updated | 2026-09-10 |
| reading_time_minutes | 4 |
| breadcrumb | Web Embeddables component propertiesWeb Embeddables referenceReferenceCustomer Service Management |