# ngx-liquid-gauge
> [](https://badge.fury.io/js/ngx-liquid-gauge)
Latest version **2.2.0** (published 2025-01-27) · BSD-3-Clause license · 0 weekly downloads
## Install
```sh
npm install ngx-liquid-gauge
pnpm add ngx-liquid-gauge
yarn add ngx-liquid-gauge
bun add ngx-liquid-gauge
```
## Health
**Score 45/100 (D)** — status: stable.
Positive: has types; esm support; no vulnerabilities.
Warnings: low downloads.
Negative: stale.
## Facts
| | |
|---|---|
| Version | 2.2.0 |
| Published | 2025-01-27 |
| First published | 2018-09-30 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 72.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Maintainers | adedayo |
| Keywords | visualization, d3, gauge, animation |
## Links
- npm: https://www.npmjs.com/package/ngx-liquid-gauge
- Repository: https://github.com/adedayo/ngx-liquid-gauge
- Issues: https://github.com/adedayo/ngx-liquid-gauge/issues
- npm.io page: https://npm.io/package/ngx-liquid-gauge
## Dependencies (1)
- [tslib](https://npm.io/package/tslib.md) ^2.3.0
## Alternatives
- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads
## Recent versions
- 2.2.0 (latest) — 2025-01-27
- 2.1.1 — 2025-01-26
- 2.1.0 — 2022-08-17
- 2.0.9 — 2021-09-19
- 2.0.8 — 2021-09-19
- 2.0.6 — 2021-05-23
- 2.0.5 — 2020-08-13
- 2.0.4 — 2020-03-08
- 2.0.3 — 2018-11-23
- 2.0.2 — 2018-11-20
- 2.0.1 — 2018-11-12
- 2.0.0 — 2018-09-30
## README
# Angular Component for Curtis Bratton's D3 Liquid Fill Gauge
[](https://badge.fury.io/js/ngx-liquid-gauge)
I really liked Curtis Bratton's D3 Liquid Fill Gauge (code here: http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6) 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.
## Installation and Usage
1. Install 'ngx-liquid-gauge' with npm
```
npm install ngx-liquid-gauge
```
2. Import 'NgxLiquidGaugeModule' in your Angular Module
```javascript
import { NgxLiquidGaugeModule } from 'ngx-liquid-gauge';
imports: [ ...... , NgxLiquidGaugeModule ],
```
3. Use 'lib-ngx-liquid-gauge' component inside a template
```html
Demo
A few demonstrations
Default Parameters
Setting just the gauge value
All the settings of the original Liquid Fill Gauge implementation are exposed
as optional inputs to the Angular Component
```
### Attributes
| 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 (@angular/common and @angular/core, version 6 and above)
- D3 (`npm install d3 --save`)
## License
BSD 3-Clause https://opensource.org/licenses/BSD-3-Clause
---
_Source: https://npm.io/package/ngx-liquid-gauge · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._