Create Minimal Dial Gauges With JavaScript And SVG

Category: Chart & Graph , Javascript | December 15, 2023
Views Total:427 views
Official Page:Go to website
Last Update:December 15, 2023


Create Minimal Dial Gauges With JavaScript And SVG


A lightweight and easy-to-use web component to help create minimal clean dial gauges using SVG and plain JavaScript.

It can be used for a variety of applications, from progress indicators to graphical display of real-time numeric data.

How to use it:

1. Install and import the dial-gauge component.

$ npm i dial-gauge
<script type="module">
  import {DialGauge} from './dial-gauge.js';

2. Add the dial-gauge component to the page and customize the gauge with the following props:

  • main-title: Title displayed on the top
  • sub-title: Title displayed at the bottom
  • scale-start: Minimum value
  • scale-end: Maximum value
  • value: Current value
  • scale-offset: custom bottom offset

3. Customize the styles of the gauge.

dial-gauge {
  /* Element */
  --dg-background-color: #ffffff;
  --dg-border: 1px solid #000000;
  --dg-border-radius: 5px;
  --dg-box-shadow: 3px 3px 5px 1px rgba(0,0,0,0.35);
  --dg-display: inline-block;
  --dg-height: 200px;
  --dg-margin: 0;
  --dg-width: 200px;
  --dg-z-index: 0;
  /* Title */
  --dg-title-color: #000000;
  --dg-title-font-family: Verdana, Geneva, Tahoma, sans-serif;
  --dg-title-font-size: 1.5em;
  /* Dial Arc */
  --dg-arc-background-color: #efefef;
  --dg-arc-color: #000000;
  --dg-arc-width: 20;
  /* Numeric Display */
  --dg-numeric-color: #000000;
  --dg-numeric-font-family: Verdana, Geneva, Tahoma, sans-serif;
  --dg-numeric-font-size: 2.5em;
  /* Subtitle */
  --dg-subtitle-color: #000000;
  --dg-subtitle-font-family: Verdana, Geneva, Tahoma, sans-serif;
  --dg-subtitle-font-size: 1em;


v0.1.5 (12/15/2023)

  • Bugfix

v0.1.4 (12/11/2023)

  • Added :host() pseudo-class for direct access to shadow DOM CSS.
  • Implemented an AdoptedStylesheet.
  • Added custom-element.json file reference to package.json.

v0.1.3 (11/10/2023)

  • Added scale offset attribute.
  • Fixed value out of scale limit when scale changed.

v0.1.2 (03/06/2023)

  • Fixed a bug where repeating values were not displayed.
  • Added handling of values outside the scale limits.

You Might Be Interested In:

Leave a Reply