d3-gauge-chart

1.0.2 • Public • Published

Google-style Gauge Chart with D3

Three gauges showing a sampel of the project. One showing Memory at 73. Another showing CPU at 80. The last showing Network at 62.

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
});

Dependencies (0)

    Dev Dependencies (0)

      Package Sidebar

      Install

      npm i d3-gauge-chart

      Weekly Downloads

      1

      Version

      1.0.2

      License

      MIT

      Unpacked Size

      14 kB

      Total Files

      6

      Last publish

      Collaborators

      • travishorn