| 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 start 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 |
