vega-frontend-monorepo/specs/6007-CHAR-chart.md

# Chart

## Chart lib type

- **Must** be able to view the Vega chart by default
- **Must** be able to switch to the TradingView chart
- **Must** have the interval persisted between chart types

## Pennant chart

### Display options

- **Must** be able to change time interval from a list of intervals (<a name="6007-CHAR-001" href="#6007-CHAR-001">6007-CHAR-001</a>)
  - 1m
  - 5m
  - 15m
  - 1H
  - 6H
  - 1D
- **Must** be able to change display type from a list of display types (<a name="6007-CHAR-002" href="#6007-CHAR-002">6007-CHAR-002</a>)
  - Mountain
  - Candlestick
  - Line
  - OHLC
- **Must** icon will change depending on the display type selected (<a name="6007-CHAR-003" href="#6007-CHAR-003">6007-CHAR-003</a>)
  - Mountain
  - Candlestick
  - Line
  - OHLC
- **Must** be able to add overlays by selecting from a list of overlays (<a name="6007-CHAR-004" href="#6007-CHAR-004">6007-CHAR-004</a>)
  - Bollinger bands
  - Envelope
  - EMA
  - Moving Average
  - Price monitoring bounds
- **Must** be able to add studies by selecting from a list of studies (<a name="6007-CHAR-005" href="#6007-CHAR-005">6007-CHAR-005</a>)
  - Eldar-ray
  - Force index
  - MACD
  - RSI
  - Volume
- **Must** be able to add multiple studies at the same time (<a name="6007-CHAR-006" href="#6007-CHAR-006">6007-CHAR-006</a>)
- **Must** be able to close any studies selected (<a name="6007-CHAR-007" href="#6007-CHAR-007">6007-CHAR-007</a>)
- **Must** be able to add multiple overlays at the same time (<a name="6007-CHAR-008" href="#6007-CHAR-008">6007-CHAR-008</a>)
- **Must** be able to close any overlays selected (<a name="6007-CHAR-009" href="#6007-CHAR-009">6007-CHAR-009</a>)

### Price and Time

- **Must** see details of price from where my mouse cursor is on the chart(<a name="6007-CHAR-010" href="#6007-CHAR-010">6007-CHAR-010</a>)

  - Time (24h)
  - Date (dd/MMM/yyyy)
  - O
  - H
  - L
  - C
  - Change

- **Must** see crosshair on the chart where my mouse cursor is(<a name="6007-CHAR-011" href="#6007-CHAR-011">6007-CHAR-011</a>)
- **Must** be able to mousewheel scroll to extend/reduce time range(<a name="6007-CHAR-012" href="#6007-CHAR-012">6007-CHAR-012</a>)
- **Must** x axis shows time range(<a name="6007-CHAR-013" href="#6007-CHAR-013">6007-CHAR-013</a>)
- **Must** y axis shows price range(<a name="6007-CHAR-014" href="#6007-CHAR-014">6007-CHAR-014</a>)
- **Must** show the last price line on the Y axis (<a name="6007-CHAR-015" href="#6007-CHAR-015">6007-CHAR-015</a>)

### Display Types

#### Mountain

- **Must** show area line chart with the line being at the last price (<a name="6007-CHAR-016" href="#6007-CHAR-016">6007-CHAR-016</a>)

#### Candlestick

- **Must** body is green if the close is higher than the open (<a name="6007-CHAR-017" href="#6007-CHAR-017">6007-CHAR-017</a>)
- **Must** body is red if the close is lower than the open (<a name="6007-CHAR-018" href="#6007-CHAR-018">6007-CHAR-018</a>)
- **Must** show open price (<a name="6007-CHAR-019" href="#6007-CHAR-019">6007-CHAR-019</a>)
- **Must** show high price (<a name="6007-CHAR-020" href="#6007-CHAR-020">6007-CHAR-020</a>)
- **Must** show low price (<a name="6007-CHAR-021" href="#6007-CHAR-021">6007-CHAR-021</a>)
- **Must** show close price (<a name="6007-CHAR-022" href="#6007-CHAR-022">6007-CHAR-022</a>)

#### Line

- **Must** show line on the chart with the line being the the last price (<a name="6007-CHAR-023" href="#6007-CHAR-023">6007-CHAR-023</a>)

#### OHLC

- **Must** show open price (<a name="6007-CHAR-024" href="#6007-CHAR-024">6007-CHAR-024</a>)
- **Must** show high price (<a name="6007-CHAR-025" href="#6007-CHAR-025">6007-CHAR-025</a>)
- **Must** show low price (<a name="6007-CHAR-026" href="#6007-CHAR-026">6007-CHAR-026</a>)
- **Must** show close price (<a name="6007-CHAR-027" href="#6007-CHAR-027">6007-CHAR-027</a>)
- **Must** show in green if the close is higher than the open (<a name="6007-CHAR-028" href="#6007-CHAR-028">6007-CHAR-028</a>)
- **Must** show in red if the close is lower than the open (<a name="6007-CHAR-029" href="#6007-CHAR-029">6007-CHAR-029</a>)

### Overlays

#### Bollinger bands

- **Must** show upper band (<a name="6007-CHAR-030" href="#6007-CHAR-030">6007-CHAR-030</a>)
- **Must** show lower band (<a name="6007-CHAR-031" href="#6007-CHAR-031">6007-CHAR-031</a>)
- **Must** show band values at time of cursor position (<a name="6007-CHAR-032" href="#6007-CHAR-032">6007-CHAR-032</a>)

#### Envelope

- **Must** show upper line (<a name="6007-CHAR-033" href="#6007-CHAR-033">6007-CHAR-033</a>)
- **Must** show lower line (<a name="6007-CHAR-034" href="#6007-CHAR-034">6007-CHAR-034</a>)
- **Must** show line values at time of cursor position (<a name="6007-CHAR-035" href="#6007-CHAR-035">6007-CHAR-035</a>)

#### EMA

- **Must** show line (<a name="6007-CHAR-036" href="#6007-CHAR-036">6007-CHAR-036</a>)
- **Must** show line value at time of cursor position (<a name="6007-CHAR-037" href="#6007-CHAR-037">6007-CHAR-037</a>)

#### Moving Average

- **Must** show line (<a name="6007-CHAR-038" href="#6007-CHAR-038">6007-CHAR-038</a>)
- **Must** show line value at time of cursor position (<a name="6007-CHAR-039" href="#6007-CHAR-039">6007-CHAR-039</a>)

#### Price monitoring bounds

- **Must** show min line (<a name="6007-CHAR-040" href="#6007-CHAR-040">6007-CHAR-040</a>)
- **Must** show max line (<a name="6007-CHAR-041" href="#6007-CHAR-041">6007-CHAR-041</a>)
- **Must** show reference line (<a name="6007-CHAR-042" href="#6007-CHAR-042">6007-CHAR-042</a>)
- **Must** show line values at time of cursor position (<a name="6007-CHAR-043" href="#6007-CHAR-043">6007-CHAR-043</a>)

### Studies

#### Eldar-ray

- **Must** show bear power line (<a name="6007-CHAR-044" href="#6007-CHAR-044">6007-CHAR-044</a>)
- **Must** show bull power line (<a name="6007-CHAR-045" href="#6007-CHAR-045">6007-CHAR-045</a>)
- **Must** show line values at time of cursor position (<a name="6007-CHAR-046" href="#6007-CHAR-046">6007-CHAR-046</a>)

#### Force index

- **Must** show force line (<a name="6007-CHAR-047" href="#6007-CHAR-047">6007-CHAR-047</a>)
- **Must** show line value at time of cursor position (<a name="6007-CHAR-048" href="#6007-CHAR-048">6007-CHAR-048</a>)

#### MACD

- **Must** show MACD line (<a name="6007-CHAR-049" href="#6007-CHAR-049">6007-CHAR-049</a>)
- **Must** show signal line (<a name="6007-CHAR-050" href="#6007-CHAR-050">6007-CHAR-050</a>)
- **Must** show histogram (<a name="6007-CHAR-051" href="#6007-CHAR-051">6007-CHAR-051</a>)
- **Must** show line values at time of cursor position (<a name="6007-CHAR-052" href="#6007-CHAR-052">6007-CHAR-052</a>)

#### RSI

- **Must** show RSI line (<a name="6007-CHAR-053" href="#6007-CHAR-053">6007-CHAR-053</a>)
- **Must** show line value at time of cursor position (<a name="6007-CHAR-054" href="#6007-CHAR-054">6007-CHAR-054</a>)

#### Volume

- **Must** show volume bars (<a name="6007-CHAR-055" href="#6007-CHAR-055">6007-CHAR-055</a>)
- **Must** show bar value at time of cursor position (<a name="6007-CHAR-056" href="#6007-CHAR-056">6007-CHAR-056</a>)

## TradingView

- **Must** persist interval in chart settings
- **Must** must show an attribution to trading view