Canvas-based JavaScript Knob/Dial Component – pure-knob

Category: Chart & Graph , Javascript | October 20, 2019
Author: andrepxx
Views Total: 3,880
Official Page: Go to website
Last Update: October 20, 2019
License: MIT


Canvas-based JavaScript Knob/Dial Component – pure-knob


A pure JavaScript knob component to render canvas-based, highly customizable knobs/dials/gauges on the web app.


  • Supports both mouse drag and touch events.
  • Double click to change the value manually.
  • Easy to customize the appearance of the knob/dial.

Basic usage:

Import the main JavaScript file pureknob.js into the html document.

<script src="pureknob.js"></script>

Create a new knob instance (300x300px).

var myKnob = pureknob.createKnob(300, 300);

Set properties. All possible properties:

  • angleStart: start angle
  • angleEnd: end angle
  • angleOffset: offset
  • colorBG: color of the knob track.
  • colorFG: color of the knob gauge / indicator.
  • colorLabel: color of the (optional) label.
  • label: a label (string) displayed at the bottom of the knob, a track radius length away from the center. Set to null to not print any label.
  • needle: decide whether to use a simple marker / needle instead of a filling gauge to indicate value along the knob’s track.
  • readonly: is readonly?
  • trackWidth: track width
  • textScale: increase/ decrease the font size. (1.0 is default font size.)
  • valMin: min value
  • valMax: max value
  • val: default value
  • fnStringToValue: function turning a string into a (numeric) value. (Check the “custom formatting” section below for more information.)
  • fnValueToString: function turning a (numeric) value into a string. (Check the “custom formatting” section below for more information.)
myKnob.setProperty(propertyName, value);

Set the initial value you prefer.


Set the peak value


Append the knob to an element.

<div id="demo"></div>
var node = knob.node();
var elem = document.getElementById('demo');

Add an event listener to the knob.

var listener = function(knob, value) {




  • Added support for an optional label to be displayed on the knob.


  • Filter for targetTouches instead of using touches.


  • Fixed behaviour on touch end.


  • Add functionality for custom formatting and scaling.


  • Add support for entry of numeric values on Android.


  • Add support for bar graph control.

You Might Be Interested In:

Leave a Reply