> 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/types/draw-style.md).

# TDrawStyle

An enumeration that defines how indicator values should be visually represented on the chart.

## Values

| Value             | Description                                                                          |
| ----------------- | ------------------------------------------------------------------------------------ |
| `NONE`            | No visual representation (used for calculation buffers)                              |
| `LINE`            | Draw as a continuous line                                                            |
| `HISTOGRAM`       | Draw as vertical bars (histogram)                                                    |
| `FILL`            | Fill the area between the current buffer and previous buffer                         |
| `SYMBOL`          | Use symbols to represent data points                                                 |
| `SECTION`         | Draw sections or segments of a line                                                  |
| `HISTOGRAM_FILL`  | Combine histogram and fill styles                                                    |
| `COLORED_CANDLES` | Display data using colored candlesticks (requires 4 buffers: Open, High, Low, Close) |

## Detailed Explanations

### FILL Style

The `FILL` draw style creates a filled area between two buffers:

* **Requires**: At least 2 buffers (current buffer and one previous buffer)
* **Behavior**: Fills the area between buffer `i-1` and buffer `i`
* **Buffer Index**: Must be buffer index 1 or higher (since it needs a previous buffer)

```typescript
// Example: Fill between two moving averages
this.api.IndicatorBuffers(2);

// Buffer 0: First line (e.g., upper band)
this.upperBuffer = this.api.CreateIndexBuffer();
this.api.SetIndexBuffer(0, this.upperBuffer);
this.api.SetIndexStyle(0, TDrawStyle.LINE, TPenStyle.SOLID, 1, "#0000ff");

// Buffer 1: Fill between buffer 0 and buffer 1
this.fillBuffer = this.api.CreateIndexBuffer();
this.api.SetIndexBuffer(1, this.fillBuffer);
this.api.SetIndexStyle(1, TDrawStyle.FILL, TPenStyle.SOLID, 1, "#80c0ff");
```

### COLORED\_CANDLES Style

The `COLORED_CANDLES` draw style displays candlestick charts with custom colors:

* **Requires**: Exactly 4 buffers in sequence (Open, High, Low, Close)
* **Buffer Order**:
  * Buffer `i-3`: Open values
  * Buffer `i-2`: High values
  * Buffer `i-1`: Low values
  * Buffer `i`: Close values (the buffer with COLORED\_CANDLES style)
* **Buffer Index**: Must be buffer index 3 or higher (since it needs 3 previous buffers)
* **Use Cases**: Custom candlestick indicators, price transformation indicators

```typescript
// Example: Custom colored candlesticks
this.api.IndicatorBuffers(4);

// Buffer 0: Open values
this.openBuffer = this.api.CreateIndexBuffer();
this.api.SetIndexBuffer(0, this.openBuffer);
this.api.SetIndexStyle(0, TDrawStyle.NONE, TPenStyle.SOLID, 1, "#000000"); // Hidden

// Buffer 1: High values
this.highBuffer = this.api.CreateIndexBuffer();
this.api.SetIndexBuffer(1, this.highBuffer);
this.api.SetIndexStyle(1, TDrawStyle.NONE, TPenStyle.SOLID, 1, "#000000"); // Hidden

// Buffer 2: Low values
this.lowBuffer = this.api.CreateIndexBuffer();
this.api.SetIndexBuffer(2, this.lowBuffer);
this.api.SetIndexStyle(2, TDrawStyle.NONE, TPenStyle.SOLID, 1, "#000000"); // Hidden

// Buffer 3: Close values + Candlestick display
this.closeBuffer = this.api.CreateIndexBuffer();
this.api.SetIndexBuffer(3, this.closeBuffer);
this.api.SetIndexStyle(
  3,
  TDrawStyle.COLORED_CANDLES,
  TPenStyle.SOLID,
  1,
  "#ff0000"
);
```

## Important Notes

### Buffer Dependencies

* **FILL**: Requires buffer index ≥ 1 (needs 1 previous buffer)
* **COLORED\_CANDLES**: Requires buffer index ≥ 3 (needs 3 previous buffers)
* Other styles can be used on any buffer index

### Buffer Setup Order

When using `FILL` or `COLORED_CANDLES`, ensure you:

1. Create all required buffers in sequence
2. Set the dependent style on the correct buffer index