Gauge.js

Installation

Creating a Gauge

simple-gauge/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="css/master.css">
</head>
<body>
  <div class="chart">
    <canvas id="gauge"></canvas>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gauge.js/1.3.5/gauge.min.js"></script>
  <script src="js/main.js"></script>
</body>
</html>

simple-gauge/js/main.js:

let opts = {
  angle: 0, // The span of the gauge arc
  lineWidth: 0.44, // The line thickness
  radiusScale: 0.83, // Relative radius
  pointer: {
    length: 0.6, // // Relative to gauge radius
    strokeWidth: 0.035, // The thickness
    color: '#000000' // Fill color
  },
  limitMax: false, // If false, max value increases automatically if value > maxValue
  limitMin: false, // If true, the min value of the gauge will be fixed
  colorStart: '#6FADCF', // Colors
  colorStop: '#8FC0DA', // just experiment with them
  strokeColor: '#E0E0E0', // to see which ones work best for you
  generateGradient: true,
  highDpiSupport: true // High resolution support
}

let target = document.querySelector('#gauge') // your canvas element

let gaugeChart = new Gauge(target).setOptions(opts) // create sexy gauge!
gaugeChart.maxValue = 3000 // set max gauge value
gaugeChart.setMinValue(0) // Prefer setter over gauge.minValue = 0
gaugeChart.animationSpeed = 32 // set animation speed (32 is default value)
gaugeChart.set(1250) // set actual value

simple-gauge/css/master.css:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Output: