Define color for Data Visualization donut through code | UI Builder

[Nico D]

As the title says, we have a need to script the colors for our Data Visualizations (since if you select a scripted data source for the widget, the UI Builder kindly removes the option we need: "fixed element colors", man you gotta love this tool! so well done!!!).

I tried searching online but I've found nothing as for some reason there is next to ZERO documentation on how things work in the UI Builder.

So my question is the following: is there a way to script the colors using data binding or some other method for Data Visualizations?

Thank you

[Tanushree Maiti]

Hi @Nico D 

Refer: 

Servicenow Doc: Create a pie or donut data visualization 

Servicenow Documentation:Colors in data visualizations 

Servicenow Doc , (use color Scheme) Create a pie, donut, or semi-donut visualization for a breakdown widget 

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

UI Builder : How to create colourful Data visualization report in workspace/UI builder servicenow 

[Nico D]

Unfortunately I hae already visited these links, they do not provide the answer I am looking for as I need to know how to properly script the colors for data visualizations.

Although in one we can find the source of my problems:

[Nico D · Accepted solution]

OK, I have found a workaround to achieve what my client needed, which was to have multiple data visualizations with their own filters while having also custom colors based on the value displayed in the graph.

You basically need to use the Viewport component:

- Add a viewport to your page (https://www.youtube.com/watch?v=d7mRHjudA7w).

- Inside the page you have created for your viewport, add the data visualization component and the filter component.

- Now, you can use the classic method to set up the filter and connect it to the data visualization (https://www.servicenow.com/community/developer-blog/set-up-interactive-filter-on-ui-builder-for-data...).

The initial problem was that the Filter component applied the query to the whole page, as intended, but using a Viewport, this behaviour can be used to avoid setting up a custom filter (per data visualization) with a custom data source for the data visualization, allowing you to use the colour type Fixed Element.

This was an unnecessarily difficult endeavour.