ngx-charts
Search…
Gauge Chart
Gauge
Swimlane Gauge Chart - StackBlitz
StackBlitz
Inputs
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
Outputs
Property
Description
select
click event
activate
element activation event (mouse enter)
deactivate
element deactivation event (mouse leave)
Data Format
The data format is single series:
1
[
2
{
3
"name": "Germany",
4
"value": 8940000
5
},
6
{
7
"name": "USA",
8
"value": 5000000
9
}
10
]
Copied!
Last modified 2yr ago
Copy link