- Fully customizable via CSS
- Custom marks & aperture
- Compatible with jQuery
First add some style by hooking up
redline.css. You can build your own theme by compiling
src/scss/redline.scss with custom variables. You can also override basic style via CSS as the demo (
There are two ways of using Redline.js in a browser: with jQuery or without.
Just point jQuery to your
.gauge container and spice with some options.
When gauge is initialized, you can move it's arrow with point method:
This method takes new arrow position as an argument. Arrow position is an index of the mark it points to. If it's fractional, arrow will point between two marks.
Redline can also be used as a class. All methods are the same, the only difference is how you call them:
var gauge = options ;gauge;// orgauge;
You can initialize Redline with a set of options.
var options =aperture : 240 // gauge's aperture in degreesmarks : caption: '0' type: 'srart' 1 2 'stop' // array of custom marksinnerMarks : true // if true — marks are kept inside the gaugeposition : 0 // default gauge position;
Redline.js gauge can be custimized entirely via CSS. Threre's also a possibility to customize each segment separately. To do so, just specify a type for a segment in
options.marks array like this:
// ~~~marks:caption: 'R' type: 'red'caption: 'A' type: 'orange'caption: 'I' type: 'yellow'caption: 'N' type: 'green'caption: 'B' type: 'blue'caption: 'O' type: 'indigo'caption: 'W' type: 'violet'// ~~~
Type will be attached to a segment element as a class:
.redline-dial-segment-*type* so you can specify custom styles for it's color, font, mark size etc.
There are also two default classes:
.redline-dial-segment-danger that are attached to penultimate and last
segment respectively, but can be overrided in
You can found an example of fully customized gauge in
You can install Redline.js via npm:
npm install redline
bower install redline