UI Builder Data Visualization Component - Specific element based colors for Vertical Bar and Pie

[Malliga Raghava]

Creating Pie chart and Bar charts using data visualization component in a UI builder page, data source is scripted to use the Remote tables.

Created Chart Colors (sys_report_chart_color) and configured the specific color based on the remote table element. In the UI Builder page, data visualization component is also set to use Fixed element color under Colors section. Even after these changes, not seeing the proper color reflecting in the pie chart and bar chart.

Anyone aware of how to configure Fixed element color based on the category. Anything else needed part from the above setup to show the chart in element based color? Attaching screenshots for reference.

  

[vishwajeet5550]

To configure fixed element colors for pie charts and bar charts in a ServiceNow UI Builder page using the Data Visualization Component, ensure that the setup is correctly implemented. First, verify that the Chart Colors records are created accurately, mapping the table column or field name (category) from the remote table to the corresponding color. The values in the table column must match exactly, including case sensitivity, with the categories displayed in the chart. Next, in the UI Builder, go to the Data Visualization Component's settings, navigate to the Colors section, and select Fixed Element Colors. Ensure these categories align with the chart colors defined in the sys_report_chart_color table.

Additionally, confirm that the data source script for the remote table is returning the correct categories and that these match the predefined chart colors. You can run the script manually to validate its output. If changes have been made, clear the cache by navigating to /cache.do in your ServiceNow instance to ensure the latest configurations are applied. Also, verify that the logged-in user has the necessary roles to access and use the sys_report_chart_color data.

If the issue persists, attach relevant information, such as screenshots of the UI Builder Data Visualization Component settings, the remote table script, and a sample output. Debugging logs can also help identify potential issues in the setup. As a final step, try using Default Colors temporarily to confirm if the issue is specific to the fixed element colors.

[AlisaVaine]

can you give more explanation

[Malliga Raghava · Accepted solution]

This is fixed now after changing the chart colors as below.

Open the Chart Color record, click on reference popup for Color name and select from the Color Definitions.

Changes on the page can be seen after clearing cache.