An Angular Library for D3 Liquid Fill Gauge
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
.editorconfig initial commit Sep 29, 2018
LICENSE added licence, module sources, and images Sep 30, 2018
package-lock.json version 2.0.0 Sep 30, 2018

Angular Component for Curtis Bratton's D3 Liquid Fill Gauge

I really liked Curtis Bratton's D3 Liquid Fill Gauge (code here: and wanted to use it in an Angular project, so I turned it to a component and packaged it as a module in case somebody else finds it useful.

In the process I upgraded the D3 API and made minor modifications to Curtis' code along the way as I converted it to Typescript from Javascript. However, all credits go to Curtis! My contribution was just the Angular component wrapper.

Sample Gauge

Installation and Usage

  1. Install 'ngx-liquid-gauge' with npm
npm install ngx-liquid-gauge
  1. Import 'NgxLiquidGaugeModule' in your Angular Module
import { NgxLiquidGaugeModule } from 'ngx-liquid-gauge';

imports: [ ...... , NgxLiquidGaugeModule ],
  1. Use 'lib-ngx-liquid-gauge' component inside a template
<h1> Demo </h1>
A few demonstrations

<h2>Default Parameters</h2>


<h2>Setting just the guage value</h2>

<lib-ngx-liquid-gauge [value]="22"></lib-ngx-liquid-gauge>

<h2>All the settings of the original Liquid Fill Gauge implementation are exposed as optional inputs to the Angular Component</h2>



Property Usage Default Required
value The gauge value. 0 no
minValue The gauge minimum value. 0 no
maxValue The gauge maximum value. 100 no
circleThickness The outer circle thickness as a percentage of its radius. 0.05 no
circleFillGap The size of the gap between the outer circle and wave circle as a percentage of the outer circle's radius. 0.05 no
circleColor The color of the outer circle. '#178BCA' no
waveHeight The wave height as a percentage of the radius of the wave circle. 0.05 no
waveCount The number of full waves per width of the wave circle. 1 no
waveRiseTime The amount of time in milliseconds for the wave to rise from 0 to its final height. 1000 no
waveAnimateTime The amount of time in milliseconds for a full wave to enter the wave circle. 18000 no
waveRise Control if the wave should rise from 0 to its full height, or start at its full height. true no
waveHeightScaling Controls wave size scaling at low and high fill percentages. When true, wave height reaches its maximum at 50% fill, and minimum at 0% and 100% fill. This helps to prevent the wave from making the wave circle from appearing totally full or empty when near its minimum or maximum fill. true no
waveAnimate Controls if the wave scrolls or is static. true no
waveColor The color of the fill wave. '#178BCA' no
waveOffset The amount to initially offset the wave. 0 = no offset. 1 = offset of one full wave. 0 no
textVertPosition The height at which to display the percentage text within the wave circle. 0 = bottom, 1 = top. .5 no
textSize The relative height of the text to display in the wave circle. 1 = 50% 1 no
valueCountUp If true, the displayed value counts up from 0 to its final value upon loading. If false, the final value is displayed. true no
displayPercent If true, a % symbol is displayed after the value. true no
textColor The color of the value text when the wave does not overlap it. '#045681' no
waveTextColor The color of the value text when the wave overlaps it. '#A4DBf8' no

Module Dependencies

  • Angular
  • D3


BSD 3-Clause