# Indicator (Gauge, Bullet, Delta, KPI)

### Delta Options

<details>

<summary>Decreasing Color</summary>

**Default Value**: #FF4136

**Type**: color

**Documentation**: Sets the color for increasing value.

**Path**: data.index.delta.decreasing.color

</details>

<details>

<summary>Decreasing Symbol</summary>

**Default Value**: ▼

**Type**: string

**Documentation**: Sets the symbol to display for increasing value

**Path**: data.index.delta.decreasing.symbol

</details>

<details>

<summary>Font Size</summary>

**Type**: number

**Min**: 1

**Path**: data.index.delta.font.size

</details>

<details>

<summary>Increasing Color</summary>

**Default Value**: #3D9970

**Type**: color

**Documentation**: Sets the color for increasing value.

**Path**: data.index.delta.increasing.color

</details>

<details>

<summary>Increasing Symbol</summary>

**Default Value**: ▲

**Type**: string

**Documentation**: Sets the symbol to display for increasing value

**Path**: data.index.delta.increasing.symbol

</details>

<details>

<summary>Position</summary>

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

</details>

<details>

<summary>Reference</summary>

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

</details>

<details>

<summary>Relative</summary>

**Default Value**: false

**Type**: boolean

**Documentation**: Show relative change

**Path**: data.index.delta.relative

</details>

<details>

<summary>Value Format</summary>

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

</details>

***

### Gauge Options

<details>

<summary>Bar Color</summary>

**Default Value**: green

**Type**: color

**Documentation**: Sets the background color of the arc.

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

</details>

<details>

<summary>Line Color</summary>

**Default Value**: #444

**Type**: color

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

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

</details>

<details>

<summary>Line Width</summary>

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

</details>

<details>

<summary>Bar Thickness</summary>

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

</details>

<details>

<summary>Bg Color</summary>

**Type**: color

**Documentation**: Sets the gauge background color.

**Path**: data.index.gauge.bgcolor

</details>

<details>

<summary>Border Color</summary>

**Default Value**: #444

**Type**: color

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

**Path**: data.index.gauge.bordercolor

</details>

<details>

<summary>Border Width</summary>

**Default Value**: 1

**Type**: number

**Min**: 0

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

**Path**: data.index.gauge.borderwidth

</details>

<details>

<summary>Shape</summary>

**Default Value**: angular

**Type**: enumerated

**Enum Options**: angular,bullet

**Documentation**: Set the shape of the gauge

**Path**: data.index.gauge.shape

</details>

***

### Threshold Options

<details>

<summary>Line Color</summary>

**Default Value**: #444

**Type**: color

**Documentation**: Sets the color of the threshold line.

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

</details>

<details>

<summary>Line Width</summary>

**Default Value**: 1

**Type**: number

**Min**: 0

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

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

</details>

<details>

<summary>Threshold Thickness</summary>

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

</details>

<details>

<summary>Threshold Value</summary>

**Default Value**: false

**Type**: number

**Documentation**: Sets a threshold value drawn as a line.

**Path**: data.index.gauge.threshold.value

</details>

***

### Basic Options

<details>

<summary>Mode</summary>

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

</details>

<details>

<summary>Name</summary>

**Type**: string

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

**Path**: data.index.name

</details>

***

### Number Options

<details>

<summary>Font Color</summary>

**Type**: color

**Path**: data.index.number.font.color

</details>

<details>

<summary>Font Size</summary>

**Type**: number

**Min**: 1

**Path**: data.index.number.font.size

</details>

<details>

<summary>Prefix</summary>

**Default Value**:

**Type**: string

**Documentation**: Sets a prefix appearing before the number.

**Path**: data.index.number.prefix

</details>

<details>

<summary>Suffix</summary>

**Default Value**:

**Type**: string

**Documentation**: Sets a suffix appearing next to the number.

**Path**: data.index.number.suffix

</details>

<details>

<summary>Value Format</summary>

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

</details>

***

### Title Attributes

<details>

<summary>Align</summary>

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

</details>

<details>

<summary>Font Color</summary>

**Type**: color

**Path**: data.index.title.font.color

</details>

<details>

<summary>Font Size</summary>

**Type**: number

**Min**: 1

**Path**: data.index.title.font.size

</details>

<details>

<summary>Text</summary>

**Type**: string

**Documentation**: Sets the title of this indicator.

**Path**: data.index.title.text

</details>

***

### Data Source

<details>

<summary>Value</summary>

**Type**: number

**Documentation**: Sets the number to be displayed.

**Path**: data.index.value

</details>