Skip to main content
GaugeChartOptions
Options for a Gauge chart.
NameTypeDescription
colorGenerator?ColorGeneratorOptional function to call in order to establish the color to be used for each series
data?Array<ObjectData>Optional data to load into the chart.
dataSource?DataSourceOptional data source (of type DataSource, meaning both VisuallyJsModel and Selection are supported) from which to retrieve data to load into the chart.
dataSourceFilter?ChartModelFilterWhen you provide dataSource, you can also provide a filter which accepts or rejects specific nodes/groups in the data source.
defaultColor?stringOptional color to use for every series. Overrides any colorGenerator.
emptyMessage?stringMessage to display when the chart has no data. Defaults to "No data".
endAngle?numberThe end angle of the gauge in degrees.
Typically 135 for a speedometer style.
height?numberHeight for the chart. If omitted, height is computed from the width of the chart's container
innerRadius?numberInner radius ratio (0 to 1).
A higher value (e.g. 0.8) creates a thin arc. 0 creates a semi-circle.
labels?{
  distance:number,
  interval:number,
  values:Array<number>
}
Configuration for the scale labels.
legend?boolean | LegendSpecEither a boolean true/false, indicating the legend should be shown/hidden, or a spec for a legend.
max?numberThe maximum value on the scale. Defaults to 100.
min?numberThe minimum value on the scale. Defaults to 0.
outerRadius?numberOuter radius ratio (0 to 1). Defaults to 1.
resizeObserver?booleanDefaults to true, meaning the chart will redraw when its container element resizes.
showNeedle?booleanWhether to show a needle/pointer. Defaults to true. When false, the zones are painted up to the value.
startAngle?numberThe start angle of the gauge in degrees. 0 is the top.
Typically -135 for a speedometer style.
style?ChartStyleOptionsStyles for legend and grid.
subtitle?SubtitleSpecSubtitle for the chart.
ticks?{
  color:string,
  interval:number,
  values:Array<number>,
  width:number
}
Configuration for tick marks.
title?ChartTitleSpecTitle for the chart.
titlePadding?numberPadding to leave underneath the title
tooltip?TooltipOptionsOptions for a tooltip for the chart.
url?stringOptional URL from which to retrieve data to load into the chart
value?numberCurrent value. If not provided, the gauge will use the computed min (which you may have provided, but if not, will be set to 0)
width?numberWidth for the chart. If omitted, width is computed from the width of the chart's container
zones?Array<GaugeChartZone>Optional segments to color the background arc
zoom?{
  enabled:boolean,
  initialValue:number,
  range:[number, number]
}
Optional zoom configuration.