Plot Types - VibeTrader

PlotLine

Renders a line chart by connecting data points with straight lines.

Props

ChartXControl

required

X-axis control for horizontal positioning

ChartYControl

required

Y-axis control for vertical positioning

tvar

TVar<PineData[]>

required

Time series variable containing the data

name

string

required

Name of the plot

atIndex

number

required

Index of the data in the PineData array to plot

options

PlotOptions

required

Plot styling options including color, linewidth, fillgaps, etc.

depth

number

Z-index depth for layering (optional)

Example

import PlotLine from './lib/charting/plot/PlotLine';

<PlotLine
  tvar={indicatorVar}
  name="EMA 20"
  options={{ color: '#2962FF', linewidth: 2, fillgaps: true }}
  atIndex={0}
  xc={xc}
  yc={yc}
  depth={1}
/>

Notes

Gaps in data are handled based on options.fillgaps
When fillgaps is true, connects across missing values
When fillgaps is false, creates separate line segments

Source: PlotLine.tsx:18-86

PlotKline

Renders candlestick, bar, or line charts for OHLC (Open-High-Low-Close) data.

Props

ChartXControl

required

X-axis control for horizontal positioning

ChartYControl

required

Y-axis control for vertical positioning

kvar

TVar<Kline>

required

Time series variable containing kline/candlestick data

kind

KlineKind

required

Chart style: 'candle', 'bar', or 'line'

depth

number

required

Z-index depth for layering

KlineKind Types

candle

string

Traditional candlestick chart with hollow/filled rectangles

bar

string

OHLC bar chart with horizontal ticks

line

string

Line chart connecting close prices

Example

import PlotKline from './lib/charting/plot/PlotKline';

<PlotKline
  kvar={klineVar}
  xc={xc}
  yc={yc}
  kind="candle"
  depth={0}
/>

Rendering Details

Candle Style: Renders rectangles for the body (open to close) with wicks extending to high/low. Positive candles (close > open) and negative candles (close < open) use different CSS classes. Bar Style: Renders vertical lines from high to low with horizontal ticks for open (left) and close (right). Line Style: Connects the close prices with a continuous line, showing min/max range when bars are compressed. Source: PlotKline.tsx:17-233

PlotHistogram

Renders vertical bars from zero to the data value, commonly used for volume or oscillator indicators.

Props

ChartXControl

required

X-axis control for horizontal positioning

ChartYControl

required

Y-axis control for vertical positioning

tvar

TVar<PineData[]>

required

Time series variable containing the data

name

string

required

Name of the plot

atIndex

number

required

Index of the data in the PineData array to plot

options

PlotOptions

required

Plot styling options (color can be dynamic per bar)

depth

number

Z-index depth for layering (optional)

Example

import PlotHistogram from './lib/charting/plot/PlotHistogram';

<PlotHistogram
  tvar={macdVar}
  xc={xc}
  yc={yc}
  depth={0}
  options={{ color: '#26a69a' }}
  name="MACD Histogram"
  atIndex={2}
/>

Dynamic Coloring

Histogram bars can have different colors based on the data. The color is read from data.options.color if available, allowing per-bar color customization. Source: PlotHistogram.tsx:19-82

PlotHline

Renders a horizontal line at a constant value across the chart.

Props

ChartXControl

required

X-axis control for horizontal positioning

ChartYControl

required

Y-axis control for vertical positioning

tvar

TVar<PineData[]>

required

Time series variable (value is read from first available bar)

name

string

required

Name of the horizontal line

atIndex

number

required

Index of the data in the PineData array

options

PlotOptions

required

Plot options including color and linestyle

depth

number

Z-index depth for layering (optional)

Line Styles

solid

string

Solid continuous line (default)

dashed

string

Dashed line with 4-3 pattern

dotted

string

Dotted line with 1-2 pattern

Example

import PlotHline from './lib/charting/plot/PlotHline';

<PlotHline
  tvar={indicatorVar}
  xc={xc}
  yc={yc}
  depth={0}
  options={{ color: '#787B86', linestyle: 'dashed' }}
  name="Overbought"
  atIndex={0}
/>

Source: PlotHline.tsx:19-74

PlotShape

Renders various shapes and markers at specific chart locations (above/below bars, top/bottom).

Props

ChartXControl

required

X-axis control for horizontal positioning

ChartYControl

required

Y-axis control for vertical positioning

tvar

TVar<PineData[]>

required

Time series variable with boolean values indicating when to show shapes

name

string

required

Name of the plot

atIndex

number

required

Index of the data in the PineData array

options

PlotOptions

required

Options including color, shape, location, and optional text

depth

number

Z-index depth for layering (optional)

Shape Types

xcross

string

X-shaped cross marker

cross

string

Plus-shaped cross marker

circle

string

Filled circle

triangleup

string

Upward-pointing triangle

triangledown

string

Downward-pointing triangle

arrowup

string

Upward-pointing arrow

arrowdown

string

Downward-pointing arrow

labelup

string

Label with upward-pointing arrow, supports text

labeldown

string

Label with downward-pointing arrow, supports text

flag

string

Flag shape

square

string

Filled square

diamond

string

Filled diamond

Location Types

abovebar

string

Above the bar’s high price

belowbar

string

Below the bar’s low price

top

string

Top of the chart pane

bottom

string

Bottom of the chart pane

Example

import PlotShape from './lib/charting/plot/PlotShape';

<PlotShape
  tvar={signalVar}
  xc={xc}
  yc={yc}
  depth={0}
  options={{
    color: '#26a69a',
    style: 'shape',
    shape: 'labelup',
    location: 'belowbar',
    text: 'BUY'
  }}
  name="Buy Signal"
  atIndex={0}
/>

Source: PlotShape.tsx:23-314

PlotFill

Fills the area between two plot lines with a solid color.

Props

ChartXControl

required

X-axis control for horizontal positioning

ChartYControl

required

Y-axis control for vertical positioning

tvar

TVar<PineData[]>

required

Time series variable containing both plots to fill between

name

string

required

Name of the fill

options

PlotOptions

required

Options including plot1, plot2 (indices), color, and fillgaps

depth

number

Z-index depth for layering (optional)

Required Options

options.plot1

number

required

Index of the first plot to fill from

options.plot2

number

required

Index of the second plot to fill to

options.color

string

required

Fill color

Example

import PlotFill from './lib/charting/plot/PlotFill';

<PlotFill
  tvar={indicatorVar}
  xc={xc}
  yc={yc}
  depth={0}
  options={{
    plot1: 0,  // First EMA
    plot2: 1,  // Second EMA
    color: 'rgba(41, 98, 255, 0.1)',
    fillgaps: true
  }}
  name="EMA Fill"
/>

Source: PlotFill.tsx:18-129

PlotBgcolor

Colors the background of individual bars/candles based on data values.

Props

ChartXControl

required

X-axis control for horizontal positioning

ChartYControl

required

Y-axis control for vertical positioning

tvar

TVar<PineData[]>

required

Time series variable containing color data

name

string

required

Name of the background plot

atIndex

number

required

Index of the data in the PineData array

options

PlotOptions

required

Plot options (color is read from data)

depth

number

Z-index depth for layering (optional)

Example

import PlotBgcolor from './lib/charting/plot/PlotBgcolor';

<PlotBgcolor
  tvar={indicatorVar}
  xc={xc}
  yc={yc}
  depth={0}
  atIndex={0}
  options={{}}
  name="Trend Background"
/>

Notes

Color is dynamically read from data.options.color for each bar
Creates rectangular backgrounds spanning the full chart height
Useful for highlighting market conditions or trends

Source: PlotBgcolor.tsx:20-58

PlotVolume

Location: src/lib/charting/plot/PlotVolume.tsx Renders trading volume as a histogram with positive and negative bars based on price movement.

Props

ChartXControl

required

X-axis control for horizontal positioning

ChartYControl

required

Y-axis control for vertical positioning

kvar

TVar<Kline>

required

Time series variable containing Kline (OHLCV) data

depth

number

Z-index depth for layering (optional)

Example

import PlotVolume from './lib/charting/plot/PlotVolume';

<PlotVolume
  kvar={klineVar}
  xc={xc}
  yc={yc}
  depth={0}
/>

Rendering Details

Positive bars (close >= open): Rendered with className="positive"
Negative bars (close < open): Rendered with className="negative"
Bar width: Auto-adjusts based on available space
Compression: Displays maximum volume when multiple bars are compressed
Bars are drawn from zero to the volume value

Source: PlotVolume.tsx:14-80

PlotStepLine

Location: src/lib/charting/plot/PlotStepLine.tsx Renders a step line chart where values change in discrete steps rather than diagonal lines.

Props

ChartXControl

required

X-axis control for horizontal positioning

ChartYControl

required

Y-axis control for vertical positioning

tvar

TVar<PineData[]>

required

Time series variable with numeric values

name

string

required

Name of the plot

atIndex

number

required

Index of the data in the PineData array

options

PlotOptions

required

Options including color and display settings

depth

number

Z-index depth for layering (optional)

Example

import PlotStepLine from './lib/charting/plot/PlotStepLine';

<PlotStepLine
  tvar={indicatorVar}
  xc={xc}
  yc={yc}
  name="Step Indicator"
  atIndex={0}
  depth={0}
  options={{
    color: '#2962FF',
    display: true
  }}
/>

Notes

Creates horizontal and vertical line segments (no diagonals)
Horizontal segment extends to the right edge of the bar
Vertical segment drawn at right edge when value changes
Useful for displaying discrete state changes

Source: PlotStepLine.tsx:18-103

PlotCrossCircles

Location: src/lib/charting/plot/PlotCrossCircles.tsx Renders markers as either circles or crosses at data points.

Props

ChartXControl

required

X-axis control for horizontal positioning

ChartYControl

required

Y-axis control for vertical positioning

tvar

TVar<PineData[]>

required

Time series variable with numeric values

name

string

required

Name of the plot

atIndex

number

required

Index of the data in the PineData array

options

PlotOptions

required

Options including color and style (‘style_circles’ or ‘style_cross’)

depth

number

Z-index depth for layering (optional)

Marker Styles

style_circles

string

Renders filled circles at each data point

style_cross

string

Renders cross markers at each data point

Example

import PlotCrossCircles from './lib/charting/plot/PlotCrossCircles';

<PlotCrossCircles
  tvar={signalVar}
  xc={xc}
  yc={yc}
  name="Buy Signals"
  atIndex={0}
  depth={1}
  options={{
    color: '#26a69a',
    style: 'style_circles'
  }}
/>

Notes

Circle radius adapts to bar width (minimum 3px)
Cross markers have fixed size based on bar width
Useful for highlighting specific data points or signals

Source: PlotCrossCircles.tsx:20-94

PlotDrawingLine

Location: src/lib/charting/plot/PlotDrawingLine.tsx Renders dynamic lines from PineScript’s line drawing API, supporting lines created at runtime.

Props

ChartXControl

required

X-axis control for horizontal positioning

ChartYControl

required

Y-axis control for vertical positioning

tvar

TVar<PineData[]>

required

Time series variable containing LineObject arrays

name

string

required

Name of the plot

atIndex

number

required

Index of the data in the PineData array

options

PlotOptions

required

Plot options

depth

number

Z-index depth for layering (optional)

LineObject Interface

Each line is defined by a LineObject with these properties:

number

Unique identifier for the line

number

X-coordinate of start point (bar index or time)

number

Y-coordinate of start point (price value)

number

X-coordinate of end point

number

Y-coordinate of end point

xloc

'time' | 'bar_index'

Coordinate system for x values

color

string

Line color

style

'style_solid' | 'style_dashed' | 'style_dotted'

Line style

width

number

Line width in pixels

Example

// PineScript code that creates dynamic lines
//@version=5
indicator("Trend Lines", overlay=true)

var line trendLine = na
if ta.crossover(close, ta.sma(close, 20))
    trendLine := line.new(bar_index, low, bar_index + 10, high, 
                          color=color.green, width=2)

// Rendered automatically by PlotDrawingLine

Line Styles

style_solid: Continuous line
style_dashed: Dashed line (4px dash, 3px gap)
style_dotted: Dotted line (1px dot, 2px gap)

Notes

Supports both time-based and bar-index-based coordinates
Multiple lines can share the same ID (will be merged)
Used by PineScript’s line.new() function

Source: PlotDrawingLine.tsx:18-86

PlotOptions Interface

Common options interface used by all plot types.

Properties

_plotKey

string

Internal plot identifier

series

number

Series number for multi-series plots

title

string

Display title for the plot

plot1

string | number

First plot index (for fill operations)

plot2

string | number

Second plot index (for fill operations)

color

string

Plot color (hex, rgb, or named color)

linewidth

number

Line thickness in pixels

linestyle

string

Line style: ‘solid’, ‘dashed’, or ‘dotted’

style

string

Plot style: ‘line’, ‘style_histogram’, ‘style_columns’, ‘shape’, ‘hline’, ‘fill’, ‘background’, etc.

fillgaps

boolean

Whether to connect across missing data points

shape

string

Shape type for PlotShape (see Shape Types above)

location

Location

Location for shapes: ‘abovebar’, ‘belowbar’, ‘top’, ‘bottom’, ‘absolute’

text

string

Text to display with labels

textcolor

string

Color for label text

Source: Plot.ts:28-55

Architecture

Customization

API Reference

​PlotLine

​Props

​Example

​Notes

​PlotKline

​Props

​KlineKind Types

​Example

​Rendering Details

​PlotHistogram

​Props

​Example

​Dynamic Coloring

​PlotHline

​Props

​Line Styles

​Example

​PlotShape

​Props

​Shape Types

​Location Types

​Example

​PlotFill

​Props

​Required Options

​Example

​PlotBgcolor

​Props

​Example

​Notes

​PlotVolume

​Props

​Example

​Rendering Details

​PlotStepLine

​Props

​Example

​Notes

​PlotCrossCircles

​Props

​Marker Styles

​Example

​Notes

​PlotDrawingLine

​Props

​LineObject Interface

​Example

​Line Styles

​Notes

​PlotOptions Interface

​Properties

Build docs developers (and LLMs) love

PlotLine

Props

Example

Notes

PlotKline

Props

KlineKind Types

Example

Rendering Details

PlotHistogram

Props

Example

Dynamic Coloring

PlotHline

Props

Line Styles

Example

PlotShape

Props

Shape Types

Location Types

Example

PlotFill

Props

Required Options

Example

PlotBgcolor

Props

Example

Notes

PlotVolume

Props

Example

Rendering Details

PlotStepLine

Props

Example

Notes

PlotCrossCircles

Props

Marker Styles

Example

Notes

PlotDrawingLine

Props

LineObject Interface

Example

Line Styles

Notes

PlotOptions Interface

Properties