> For the complete documentation index, see [llms.txt](https://nocode-artisan.gitbook.io/plotly-charts/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nocode-artisan.gitbook.io/plotly-charts/additional-resources/elements-fields-reference/traces/business-and-financial-charts/indicator.md).

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://nocode-artisan.gitbook.io/plotly-charts/additional-resources/elements-fields-reference/traces/business-and-financial-charts/indicator.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.