Indicator (Gauge, Bullet, Delta, KPI)

Delta Options

Decreasing Color

Default Value: #FF4136

Type: color

Documentation: Sets the color for increasing value.

Path: data.index.delta.decreasing.color

Decreasing Symbol

Default Value: ▼

Type: string

Documentation: Sets the symbol to display for increasing value

Path: data.index.delta.decreasing.symbol

Font Size

Type: number

Min: 1

Path: data.index.delta.font.size

Increasing Color

Default Value: #3D9970

Type: color

Documentation: Sets the color for increasing value.

Path: data.index.delta.increasing.color

Increasing Symbol

Default Value: ▲

Type: string

Documentation: Sets the symbol to display for increasing value

Path: data.index.delta.increasing.symbol

Position

Default Value: bottom

Type: enumerated

Enum Options: top,bottom,left,right

Documentation: Sets the position of delta with respect to the number.

Path: data.index.delta.position

Reference

Type: number

Documentation: Sets the reference value to compute the delta. By default, it is set to the current value.

Path: data.index.delta.reference

Relative

Default Value: false

Type: boolean

Documentation: Show relative change

Path: data.index.delta.relative

Value Format

Type: string

Documentation: Sets the value formatting rule using d3 formatting mini-languages which are very similar to those in Python. For numbers, see: https://github.com/d3/d3-format/tree/v1.4.5#d3-format.

Path: data.index.delta.valueformat


Gauge Options

Bar Color

Default Value: green

Type: color

Documentation: Sets the background color of the arc.

Path: data.index.gauge.bar.color

Line Color

Default Value: #444

Type: color

Documentation: Sets the color of the line enclosing each sector.

Path: data.index.gauge.bar.line.color

Line Width

Default Value: 0

Type: number

Min: 0

Documentation: Sets the width (in px) of the line enclosing each sector.

Path: data.index.gauge.bar.line.width

Bar Thickness

Default Value: 1

Type: number

Min: 0

Max: 1

Documentation: Sets the thickness of the bar as a fraction of the total thickness of the gauge.

Path: data.index.gauge.bar.thickness

Bg Color

Type: color

Documentation: Sets the gauge background color.

Path: data.index.gauge.bgcolor

Border Color

Default Value: #444

Type: color

Documentation: Sets the color of the border enclosing the gauge.

Path: data.index.gauge.bordercolor

Border Width

Default Value: 1

Type: number

Min: 0

Documentation: Sets the width (in px) of the border enclosing the gauge.

Path: data.index.gauge.borderwidth

Shape

Default Value: angular

Type: enumerated

Enum Options: angular,bullet

Documentation: Set the shape of the gauge

Path: data.index.gauge.shape


Threshold Options

Line Color

Default Value: #444

Type: color

Documentation: Sets the color of the threshold line.

Path: data.index.gauge.threshold.line.color

Line Width

Default Value: 1

Type: number

Min: 0

Documentation: Sets the width (in px) of the threshold line.

Path: data.index.gauge.threshold.line.width

Threshold Thickness

Default Value: 0.85

Type: number

Min: 0

Max: 1

Documentation: Sets the thickness of the threshold line as a fraction of the thickness of the gauge.

Path: data.index.gauge.threshold.thickness

Threshold Value

Default Value: false

Type: number

Documentation: Sets a threshold value drawn as a line.

Path: data.index.gauge.threshold.value


Basic Options

Mode

Default Value: number

Type: flaglist

Flag Options: number,delta,gauge

Documentation: Determines how the value is displayed on the graph. number displays the value numerically in text. delta displays the difference to a reference value in text. Finally, gauge displays the value graphically on an axis.

Path: data.index.mode

Name

Type: string

Documentation: Sets the trace name. The trace name appears as the legend item and on hover.

Path: data.index.name


Number Options

Font Color

Type: color

Path: data.index.number.font.color

Font Size

Type: number

Min: 1

Path: data.index.number.font.size

Prefix

Default Value:

Type: string

Documentation: Sets a prefix appearing before the number.

Path: data.index.number.prefix

Suffix

Default Value:

Type: string

Documentation: Sets a suffix appearing next to the number.

Path: data.index.number.suffix

Value Format

Default Value:

Type: string

Documentation: Sets the value formatting rule using d3 formatting mini-languages which are very similar to those in Python. For numbers, see: https://github.com/d3/d3-format/tree/v1.4.5#d3-format.

Path: data.index.number.valueformat


Title Attributes

Align

Type: enumerated

Enum Options: left,center,right

Documentation: Sets the horizontal alignment of the title. It defaults to center except for bullet charts for which it defaults to right.

Path: data.index.title.align

Font Color

Type: color

Path: data.index.title.font.color

Font Size

Type: number

Min: 1

Path: data.index.title.font.size

Text

Type: string

Documentation: Sets the title of this indicator.

Path: data.index.title.text


Data Source

Value

Type: number

Documentation: Sets the number to be displayed.

Path: data.index.value

Last updated