> For the complete documentation index, see [llms.txt](https://fto-2.gitbook.io/fto-indicators-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://fto-2.gitbook.io/fto-indicators-docs/visible-buffers.md).

# Visible buffers

### Overview

To display indicator values on the chart in **Forex Tester Online**, you need to use **buffers**.\
Buffers store the calculated values and define how they should be visualized (e.g., lines, histograms, dots).

Each buffer is created as a `TIndexBuffer` and configured through API calls.

***

### Step-by-Step Guide

#### 1. **Declare the Buffer**

All buffers must be declared as class fields using the `TIndexBuffer` type.

```ts
public SSMA!: TIndexBuffer;
```

***

#### 2. **Create the Buffer in `Init()`**

Create the buffer instance using the `CreateIndexBuffer()` method.

```ts
this.SSMA = this.api.CreateIndexBuffer();
```

***

#### 3. **Register the Number of Buffers**

Tell the API how many buffers you plan to use. In this case — one:

```ts
this.api.IndicatorBuffers(1);
```

> This must be called **before** setting buffer styles or assignments.

***

#### 4. **Bind the Buffer to an Index**

Each buffer must be assigned a unique index:

```ts
this.api.SetIndexBuffer(0, this.SSMA);
```

***

#### 5. **Configure the Buffer**

You can now customize how the buffer will appear on the chart:

```ts
this.api.SetIndexLabel(0, "SSMA"); // Label shown in the legend
this.api.SetIndexStyle(0, TDrawStyle.LINE, TPenStyle.SOLID, 1, "#FF0000"); // Style
this.api.SetIndexDrawBegin(0, this.Period.value - 1 + this.Shift.value); // Starting bar
```

***

### Full Example

```ts
import { TIndexBuffer } from "forex-tester-custom-indicator-api";

export default class MovingAverage extends IndicatorImplementation {
  // Declare parameters as class fields
  public Period!: TOptValue_number;
  public Shift!: TOptValue_number;
  public SSMA!: TIndexBuffer;

  public Init(): void {
    // Create parameters
    this.Period = this.api.createTOptValue_number(8);
    this.Shift = this.api.createTOptValue_number(0);

    // Create and configure the buffer
    this.SSMA = this.api.CreateIndexBuffer();
    this.api.IndicatorBuffers(1);
    this.api.SetIndexBuffer(0, this.SSMA);
    this.api.SetIndexLabel(0, "SSMA");
    this.api.SetIndexStyle(0, TDrawStyle.LINE, TPenStyle.SOLID, 1, "#FF0000");
    this.api.SetIndexDrawBegin(0, this.Period.value - 1 + this.Shift.value);
  }
}
```

***

### Notes

* Each buffer must be **declared, created, and registered** properly to be visible on the chart.
* Indices must be **unique and zero-based** (`0`, `1`, `2`, etc.).
* You can use multiple buffers to display several lines or visual elements.