Skip to content

Gauge Chart

Gauge

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

Data Format

The data format is single series:

[
  {
    "name": "Germany",
    "value": 8940000
  },
  {
    "name": "USA",
    "value": 5000000
  }
]