Skip to main content

Visual Awesomeness Unlocked: Liquid Fill Gauge

Headshot of article author Tzvi Keisar

One of the key tenets of Power BI’s custom visuals is to unlock the creativity of developers to build domain-specific insightful visuals.

Liquid Fill Gauge is a circle gauge that represents a percentage value, but in an eye catching way: the liquid fills the circle to up to the relevant value with a beautiful animation of water waves.

The Liquid Fill Gauge custom visual is perfect to use when you want to visualize data that represents liquid levels. For example, if you have an IoT device that monitors your barbeque grill’s propane tank level, you could send that data to Power BI and use the Liquid Fill Gauge to see how empty or full it is from anywhere in the world.

It was created by Jon Gallant, based off of Curtis Bratton’s Liquid Fill Gauge.

The visual is highly customizable to suit your needs:

  • Text color, size, display % on/off
  • Wave color, height, animation settings, and more…
  • Circle color and thickness

image

To use, simply download Liquid Fill Gauge from the visuals gallery, and import it to your Power BI report.

The code is on GitHub: https://github.com/jonbgallant/PowerBI-visuals-liquidFillGauge/

Jonis a great fan and contributor to Power BI custom visuals. Check out his latest blog post, where he lays out the essentials of how to create custom visuals based on existing D3 visuals.

As usual, we can’t wait to hear your thoughts and your ideas for improvements.

Enjoy!