Skip to main content

​
ChartView

Base abstract class for all chart view components. Provides common functionality for rendering charts, handling drawing tools, cursors, and user interactions.

​
ViewProps

Interface for chart view component properties.
​
name
string
required
Name identifier for the view
​
id
string
required
Unique identifier for the view instance
​
x
number
required
X-coordinate position of the view
​
y
number
required
Y-coordinate position of the view
​
width
number
required
Width of the view in pixels
​
height
number
required
Height of the view in pixels
​
xc
ChartXControl
required
X-axis control for managing horizontal chart coordinates and time
​
tvar
TVar<unknown>
required
Time series variable containing the chart data
​
updateEvent
UpdateEvent
required
Event object for triggering view updates
​
updateDrawing
UpdateDrawing
Drawing update configuration for managing drawing tools
​
mainIndicatorOutputs
Output[]
Main indicator outputs for indicator chart views
​
indexOfStackedIndicator
number
Index of the indicator in stacked layout
​
overlayIndicators
Indicator[]
Array of indicators to overlay on the chart

​
Constants

​
AXISY_WIDTH
number
Width of the Y-axis area (55 pixels)
​
CONTROL_HEIGHT
number
Height of control elements (12 pixels)
​
TITLE_HEIGHT_PER_LINE
number
Height per line of title text (14 pixels)

​
Methods

​
computeGeometry
(atleastMinValue?: number) => void
Computes the chart geometry including max/min values and Y-axis scaling. Called before rendering to ensure proper coordinate mapping.
​
wChart
() => number
Returns the chart width (total width minus axis width)
​
valueAtTime
(time: number) => number
Abstract method to get the value at a specific time. Must be implemented by subclasses.
​
plot
() => Pick<ViewState, 'chartLines' | 'chartAxisy' | 'gridLines' | 'overlayChartLines' | 'drawingLines'>
Abstract method to plot the chart. Returns JSX elements for rendering.

​
KlineView

Chart view component for displaying candlestick/kline data with support for overlays and drawings.

​
Example Usage

import { KlineView } from './lib/charting/view/KlineView';
import { TVar } from './lib/timeseris/TVar';
import { Kline } from './lib/domain/Kline';

<KlineView
  name="Main Chart"
  id="kline"
  x={0}
  y={0}
  width={800}
  height={400}
  xc={chartXControl}
  tvar={klineVar}
  updateEvent={updateEvent}
  overlayIndicators={indicators}
/>

​
Props

Inherits all props from ViewProps. The tvar prop should be of type TVar<Kline>.

​
Methods

​
plot
() => { chartLines, chartAxisy, gridLines, overlayChartLines, drawingLines }
Renders the kline chart with PlotKline component and any overlay indicators.
​
computeMaxValueMinValue
() => [number, number]
Computes the maximum high and minimum low values across all visible klines.Returns: [maxValue, minValue]
​
valueAtTime
(time: number) => number
Returns the close price of the kline at the specified time.Source: KlineView.tsx:229
​
swithScalarType
() => void
Switches between LINEAR, LG (logarithmic), and LN (natural log) Y-axis scaling.

​
Overlay Support

KlineView supports multiple overlay plot types:
  • style_line / line - Line plots (PlotLine)
  • style_linebr / style_stepline - Step line plots (PlotStepLine)
  • style_circles / style_cross - Circle/cross markers (PlotCrossCircles)
  • shape / char - Shape markers (PlotShape)
  • hline - Horizontal lines (PlotHline)
  • fill - Fill between plots (PlotFill)
  • background - Background color (PlotBgcolor)
  • drawing_line - Drawing lines (PlotDrawingLine)
Source: KlineView.tsx:67-188

​
IndicatorView

Chart view component for displaying technical indicators in a separate pane.

​
Example Usage

import { IndicatorView } from './lib/charting/view/IndicatorView';

<IndicatorView
  name="RSI"
  id="indicator-0"
  x={0}
  y={450}
  width={800}
  height={150}
  xc={chartXControl}
  tvar={indicatorVar}
  updateEvent={updateEvent}
  mainIndicatorOutputs={outputs}
  indexOfStackedIndicator={0}
/>

​
Props

Inherits all props from ViewProps. The tvar prop should be of type TVar<PineData[]> and mainIndicatorOutputs is required.

​
Methods

​
plot
() => { chartLines, chartAxisy, gridLines }
Renders the indicator based on the plot style specified in mainIndicatorOutputs.
​
computeMaxValueMinValue
() => [number, number]
Computes the maximum and minimum values from all indicator outputs across visible bars.Returns: [maxValue, minValue]
​
valueAtTime
(time: number) => number
Returns undefined - indicator views don’t show cursor values for time.Source: IndicatorView.tsx:203

​
Supported Plot Styles

  • style_histogram / style_columns - Histogram/column plots (PlotHistogram)
  • style_circles / style_cross - Circle/cross markers (PlotCrossCircles)
  • shape / char - Shape markers (PlotShape)
  • hline - Horizontal lines (PlotHline)
  • fill - Fill between plots (PlotFill)
  • background - Background color (PlotBgcolor)
  • drawing_line - Drawing lines (PlotDrawingLine)
  • line / dashed - Line plots (PlotLine)
Source: IndicatorView.tsx:38-142

​
VolumeView

Chart view component for displaying trading volume as a histogram.

​
Example Usage

import { VolumeView } from './lib/charting/view/VolumeView';

<VolumeView
  name="Volume"
  id="volume"
  x={0}
  y={410}
  width={800}
  height={100}
  xc={chartXControl}
  tvar={klineVar}
  updateEvent={updateEvent}
/>

​
Props

Inherits all props from ViewProps. The tvar prop should be of type TVar<Kline>.

​
Methods

​
plot
() => { chartLines, chartAxisy, gridLines }
Renders the volume histogram using PlotVolume component.
​
computeMaxValueMinValue
() => [number, number]
Computes the maximum volume across visible bars. Minimum is always 0.Returns: [maxVolume, 0]Source: VolumeView.tsx:49-74
​
valueAtTime
(time: number) => number
Returns the volume of the kline at the specified time.Source: VolumeView.tsx:88

​
Notes

  • Volume view always uses a minimum value of 0
  • Shares the same kline data as KlineView but displays volume property
  • Supports LINEAR and LG (logarithmic) Y-axis scaling

Build docs developers (and LLMs) love

Get started for freeTalk to us