--- 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 --- # Component properties for the Data visualization # Component properties for the Data visualization {#ariaid-title1} * Release version: Australia * * Updated March 12, 2026 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 3 minutes to read Component properties enable you to configure the behavior of the Data visualization component instance on the third-party website. {#we-data-viz-comp-prop__table_csm_base_entities__entry__2} | 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. | [Table 1. Data visualization component: Donut, semi-donut, and pie charts properties] {#we-data-viz-comp-prop__table_csm_base_entities} {#we-data-viz-comp-prop__table_ksy_mdw_c2c__entry__2} | 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. | [Table 2. Data visualization component: Singe score properties form] {#we-data-viz-comp-prop__table_ksy_mdw_c2c} **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** * [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.") * [Sample code for the Data visualization component](https://www.servicenow.com/docs/XkvBqNBbfmEm0I_WAenKiw "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.")