Responsive gauge

Configuration

The gauges can be customized using the following parameters; CSS rules can be used for font-size or colors.
ring : {

Ring config

shift
Shift of the ring from the container side.
Type:
number (%)
Default Value:
3
Since:
0.9.0
width
Width of the ring.
Type:
number (%)
Default Value:
7
Since:
0.9.0
minAngle
Angle at which the ring starts. -90 is the minimum value, and 0 is at the top of the vertical axis.
Type:
number (°)
Default Value:
-90
Since:
0.9.0
maxAngle
Angle at which the ring ends.
Type:
number (°)
Default Value:
90
Since:
0.9.0

Sectors config

sectorsNumber
Number of sectors of the ring.
Type:
integer
Default Value:
5
Since:
0.9.0
border
Enables the border around the ring.
Type:
boolean
Default Value:
false
Since:
0.9.0

Colors config

colors
Color(s) of the gauge; values are
'gradient' for a gradient
'sectors' for coloring on each sector (gradient)
[#111, #222, ...] for specifying the color of each sector
false : no color (CSS color can be used)
Default Value:
false
Since:
0.9.0
endColor
If colors = 'gradient' or 'sectors', used as last gradient color.
Type:
color
Default Value:
#d50000
Since:
0.9.0
startColor
If colors = 'gradient' or 'sectors', used as first gradient color.
Type:
color
Default Value:
#ffebee
Since:
0.9.0
}


pointer : {

Pointers config

type
Type of pointer; values are :
'needle',
'filament',
'filler'
Type:
string
Default Value:
needle
Since:
0.9.0
slowness
Time (in millis) for the pointer to stabilize at the correct position.
Type:
integer (ms)
Default Value:
200
Since:
0.9.0
needleLength
Length of 'needle' pointers.
Type:
number (%)
Default Value:
90
Since:
0.9.0
filamentLength
Overflow of 'filament' pointers over the ring.
Type:
number (%)
Default Value:
2
Since:
0.9.0
fillerWidth
Width of 'filled' pointers.
Type:
number (%)
Default Value:
By default, takes the ring width.
Since:
0.9.0
fillerShift
Shift of the 'filled' pointers from the container side.
Type:
number (%)
Default Value:
0
Since:
0.9.0

Colors config

colors
Color of the pointer (only for 'filled' pointer); values are
'gradient' for a gradual color change of the pointer depending the value
[#111, #222, ...] for specifying the color change of the pointer
false : no color (CSS color can be used)
Default Value:
false
Since:
0.9.1
endColor
If colors = 'gradient' used as last gradient color.
Type:
color
Default Value:
#d50000
Since:
0.9.1
startColor
If colors = 'gradient', used as first gradient color.
Type:
color
Default Value:
#ffebee
Since:
0.9.1
}


data :{

Limits config

min
Minimum value displayed on the gauge.
Type:
number
Default Value:
0
Since:
0.9.0
max
Maximum value displayed on the gauge.
Type:
number
Default Value:
100
Since:
0.9.0
value
Value displayed on the gauge.
Type:
number
Default Value:
0
Since:
0.9.0
}


labels:{

Labels config

number
Number of labels around the gauges (ticks).
Type:
integer
Default Value:
By default, as many as sectors.
Since:
0.9.0
formatter
Function used to format the labels (can be d3.format). The formatter context is the config object.
Example : (v) => v + '/10' // will display '5/10'
Parameters:
v
the value to format
mantissaMax
If no custom labelFormatter is specified, number of mantissa digits before using SI units (Mega, Kilo...).
Type:
integer
Default Value:
4
Since:
0.9.0
decimalsMax
If no custom labelFormatter is specified, limits the number of decimal digits of labels.
Type:
integer
Default Value:
0
Since:
0.9.0
shift
Shift of the label from the container side.
Type:
number (%)
Default Value:
0
Since:
0.9.0
}


value :{

Value display config

show
Enable value display.
Type:
boolean
Default Value:
true
Since:
0.9.0
shift
Shift of the label from the center of the gauge.
Type:
number (%)
Default Value:
true
Since:
0.9.0
formatter
Function used to format the value (can be d3.format). The formatter context is the config object.
Example : (v) => '--' + v + '--' // will display '--5--'
Parameters:
v
the value to format
mantissaMax
If no custom valueFormatter is specified, number of mantissa digits before using SI units (Mega, Kilo...).
Type:
integer
Default Value:
4
Since:
0.9.0
decimalsMax
If no custom valueFormatter is specified, limits the number of decimal digits of labels.
Type:
integer
Default Value:
0
Since:
0.9.0
unit
Unit displayed under the value.
Type:
string
Default Value:
' '
Since:
0.9.0
}

CSS styles

Colors and font sizes are handled by CSS; these are included in the library, but you can override them if you need.

Gauge style

.gauge-arc {
    fill: // color of the ring
}

.gauge-border {
    stroke: // color of the border around the ring
}

.gauge-filler {
    fill: // color of the 'filled' pointer
}

.gauge-filament {
    stroke: // color of the 'filament' pointer
}

.gauge-needle {
    stroke: // color of the 'needle' pointer
}

Values and labels style

.gauge-label text {
    font-size: // size of the labels ;
    fill: // color of the labels ;
}

.wide-gauge .gauge-label text {
    font-size: // size of the labels in 'wide' gauges ;
}

.gauge-value text {
    font-size: // size of the displayed value ;
    fill: // color of the displayed value ;
}

.wide-gauge .gauge-value text {
    font-size: // size of the displayed value in 'wide' gauges ;
}

.gauge-unit {
    font-size: // size of the unit below the displayed value;
    fill: // color of the unit below the displayed value;
}