ServiceNow Bar Chart Race Widget | D3.js Data Visualization

[Deepak Negi]

We are all used to the standard reporting widgets in ServiceNow. They are functional, reliable, and exactly what we expect. But sometimes, you just want to see your data move.

Demo Video:

https://youtu.be/PiJ1r4QRxGU

I built this Bar Chart Race widget as a fun side project to break away from the usual static dashboards. I wanted to bring that viral data visualization style—where you watch rankings change over time—directly into the Service Portal. It turns out, watching your assignment groups or incident trends "race" against each other is a lot more engaging than staring at a list view

Why I Built It

The goal wasn't to replace standard reporting, but to enhance the visual experience of the portal. I wanted to create something that looked and felt different from the standard reports we see every day.

I focused heavily on the aesthetic for this one. Instead of the standard flat white background, I implemented a "Glassmorphism" design—that translucent, frosted-glass look you see in(well, you know where).

With a simple toggle, the widget switches between a clean Light Mode (Aurora) and a high-contrast Dark Mode (Midnight). It’s a small detail, but it makes the data pop and fits much better into modern, dark-themed components.

An additional toggle is provided to refresh the chart to run the animation again because why not!

Under the Hood

Technically, this connects ServiceNow’s historical data with the D3.js library. I kept the architecture simple:

• Zero Configuration: It lazy-loads the necessary libraries automatically, so you don't need to mess with Dependency records.
• Responsive: It uses DOM detection to resize the chart perfectly, whether it's on a full-width dashboard or a narrow sidebar column.
• Scoped or Global: It works wherever you need it.

Try It Out

This was a fun build for me, and I’m sharing it with the community so you can use it too. It is fully open-source and free for personal or commercial use.

You can download the Update Set from ServiceNow Share and share your feedback.

https://developer.servicenow.com/connect.do#!/share/contents/9138792_advanced_bar_chart_race_visuali...

Happy Learning!

[lauri457]

I'm sure it might've been interesting to build but how would you suggest anyone else would benefit from this widget? It offers zero configurability - everything is hard-coded up to the css. It doesn't even use angularjs concepts such as data binding but just direct dom manipulation.

• Zero Configuration: It lazy-loads the necessary libraries automatically, so you don't need to mess with Dependency records.

---

Widget dependencies are loaded with the page and your dependency is even explicitly set to load on every page.

I could see some use cases for creative data visualizations in the portal but there is not enough of that in this article and a little bit too much of obvious ai content.

[Deepak Negi]

Thanks for the feedback Lauri

As mentioned in the post, it was a quick experiment so it may lacks some optimization. 

I will try to work on the configurable options later as this is still the initial version of the build.