Gauge Chart
Gauge
| Property |
Type |
Default Value |
Description |
| view |
number[] |
|
the dimensions of the chart [width, height]. If left undefined, the chart will fit to the parent container size |
| results |
object[] |
|
the chart data |
| scheme |
object |
|
the color scheme of the chart |
| customColors |
function or object |
|
custom colors for the chart. Used to override a color for a specific value |
| animations |
boolean |
true |
enable animations |
| legend |
boolean |
false |
show or hide the legend |
| legendTitle |
string |
'Legend' |
the legend title |
| min |
number |
0 |
starting point of the scale |
| max |
number |
100 |
ending point of the scale |
| units |
string |
|
text to display under the value |
| bigSegments |
number |
10 |
number of big segments on the axis |
| smallSegments |
number |
5 |
number of small segments between every big segment |
| showAxis |
boolean |
true |
show or hide the axis |
| axisTickFormatting |
function |
|
the axis tick formatting |
| valueFormatting |
function |
|
function that formats the value in the middle of the chart |
| angleSpan |
number |
240 |
the angle that the chart spans (in degrees) |
| startAngle |
number |
-120 |
the angle that the chart is rotated by. Use negative half of the spanning angle to centralize |
| tooltipDisabled |
boolean |
false |
show or hide the tooltip |
| tooltipTemplate |
TemplateRef |
|
a custom ng-template to be displayed inside the tooltip |
| showText |
boolean |
true |
show or hide the inner text |
Outputs
| Property |
Description |
| select |
click event |
| activate |
element activation event (mouse enter) |
| deactivate |
element deactivation event (mouse leave) |
The data format is single series:
[
{
"name": "Germany",
"value": 8940000
},
{
"name": "USA",
"value": 5000000
}
]