# d3-gauge-chart

> A re-creation of Google Charts's Gauge chart using D3. Only the basics are included: a label and a value.

Latest version **1.0.3** (published 2026-04-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install d3-gauge-chart
pnpm add d3-gauge-chart
yarn add d3-gauge-chart
bun add d3-gauge-chart
```

## Health

**Score 50/100 (C)** — status: active.

Positive: no vulnerabilities; has provenance.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2026-04-02 |
| First published | 2019-01-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Travis Horn |
| Maintainers | travishorn |

## Links

- npm: https://www.npmjs.com/package/d3-gauge-chart
- Repository: https://github.com/travishorn/d3-gauge-chart
- Homepage: https://github.com/travishorn/d3-gauge-chart#readme
- Issues: https://github.com/travishorn/d3-gauge-chart/issues
- npm.io page: https://npm.io/package/d3-gauge-chart

## Recent versions

- 1.0.3 (latest) — 2026-04-02
- 1.0.2 — 2019-01-26
- 1.0.1 — 2019-01-26

## README

# Google-style Gauge Chart with D3

![Three gauges showing a sample of the project. One showing Memory at 73.
Another showing CPU at 80. The last showing Network at 62.](screenshot.png)

A re-creation of Google Charts's Gauge chart using D3. Only the basics are
included: a label and a value.

## Installation

1. Include D3: `<script src="https://d3js.org/d3.v5.min.js"></script>`
2. Include JS: `<script src="https://unpkg.com/d3-gauge-chart"></script>`
3. Include CSS: `<link rel="stylesheet"
href="https://unpkg.com/d3-gauge-chart/d3-gauge-chart.css">`

## Usage

1. Create a new SVG element in your HTML. Make sure it has an `id`, `width`, and
   `height`. For best results, make it square.

2. Call the function:

```
gaugeChart({
  el: '#chart',
  label: 'Memory',
  value: 73,
  min: 0,   // optional
  max: 100, // optional
});
```

---
_Source: https://npm.io/package/d3-gauge-chart · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._