Name | Description | Property Type |
---|
value | Numeric value for the gauge to display. Default is 0. | value: numeric |
secondaryValue | Optional secondary value for the gauge to display on a second axis. Default is 0. | value: numeric |
startAngle | Radial position for the start of the gauge's axis. Default is 180. | value: numeric |
endAngle | Radial position for the end of the gauge's axis. Default is 360. | value: numeric |
outerAxis | Sets the values for an outer axis on the gauge. Click here to see the outerAxis properties Name | Description | Property Type |
---|
data | What value this axis and its needle should display. Can be set to the value or secondary value of the gauge. | value: string dropdown | show | Whether the outer axis is displayed. Default is true (show). | value: boolean | minValue | Minimum gauge value for this axis. Default is zero (0). | value: numeric
| maxValue | Maximum gauge value for this axis. Default is 120. | value: numeric
| width | Width of the line (in pixels) that represents the outer axis. | value: numeric
| color | Color of the arc line that represents the outer axis. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector. | color | percentRadius | Radius of the outer axis, as a percentage of the total chart radius. | value: numeric | ranges | Zones defined on the gauge arc line with a unique color. Array values always start at 0 and increment. Each array item has the following properties: Name | Description | Property Type |
---|
start | Value at which this range starts. | value: numeric | end | Value at which this range ends. | value: numeric | width | Width of this axis, in pixels. | value: numeric | color | Color to apply to this range of the dial. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. | color |
| array | needle | Settings for the needle on the gauge. Options as follows: Name | Description | Property Type |
---|
origin | Distance from the gauge's center or at which the needle originates, as a percentage of the radius. For example, a value of 0 indicates the needle starts at the center point of the gauge. A value of 50 indicates it starts 50% from the center point. | value: numeric | reach | How far the needle reaches from the center of the gauge towards the outer dial, as a percentage of the radius. For example, a value of 100 indicates the needle will reach all the way to the outer axis. | value: numeric | color | Color of the gauge's needle. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector. | color |
| object | tickMarks | Settings for the display of the tick marks on the outer access. Options as follows: Name | Description | Property Type |
---|
color | Color of the tick marks. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector. | color | thickness | Thickness of the tick marks, in pixels. Default is 1. | value: numeric | length | Length of the tick marks, in pixels. Default is 10. | value: numeric |
| object |
| object |
innerAxis | Sets the values for an inner axis on the gauge. Click here to see the innerAxis properties
Name | Description | Property Type |
---|
data | What value this axis and its needle should display. Can be set to the value or secondary value of the gauge. | value: numeric | show | Whether the inner axis is displayed on the gauge. Default is false (don't show). | value: boolean | minValue | Minimum gauge value for this axis. Default is zero (0). | value: numeric | maxValue | Maximum gauge value for this axis. Default is 80. | value: numeric
| width | Width of the line (in pixels) that represents the inner axis. | value: numeric | color | Color of the arc line that represents the inner axis. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector. | color | percentRadius | Radius of the inner axis, as a percentage of the total chart radius. | value: numeric | ranges | Number of zones defined on the gauge arc line with a unique color. Name | Description | Property Type |
---|
start | Value at which this range starts. | value: numeric | end | Value at which this range ends. | value: numeric | width | Width of this axis, in pixels. | value: numeric | color | Color to apply to this range of the dial. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector. | color |
| array | needle | Settings for the display of the needle on the inner access. Options as follows: Name | Description | Property Type |
---|
origin | Distance from the gauge's center at which the needle originates, as a percentage of the radius. For example, a value of 0 indicates the needle starts at the center point of the gauge. For example, a value of 50 indicates it starts 50% from the center point. | value: numeric | reach | Length of the needle in percentage. For example, a value of 100 indicates the needle will reach all the way to the inner axis. | value: numeric | color | Color of the gauge's needle. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector. | color |
| object | tickMarks | Settings for the display of the tick marks on the inner access. Options as follows: Name | Description | Property Type |
---|
color | Color of the tick marks. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector. | color | thickness | Thickness of the tick marks, in pixels. Default is 1. | value: numeric | length | Length of the tick marks, in pixels. Default is 10. | value: numeric |
| object |
| object |
backgroundColor | Color applied as a background within the gauge. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector. | color |
animate | Whether needle should be animated in a sweeping motion when value changes. Default is false. | value: boolean |
reverseScale | If true, the gauge will reverse the direction from minValue to maxValue on its dial. | value: boolean |
style | Sets a style for this gauge. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class. | object |