Stock Chart
About
Financial markets use specialized charts to plot stock data. Since stock prices can vary substantially from one stock to another, only one stock can be represented in a stock chart for consistency. Stock data can be obtained from Tallac Options.
Chart
Use the chart's context to instantiate a StockChart object as follows:
let context = document.getElementById('chart');
let chart = new StockChart(context);
Background Color
The chart has a transparent background color by default. As illustrated in the following examples, the background color can be set with a color name, a hexadecimal value or an RGB value.
//gray color
chart.backgroundColor = 'gray';
//hexadecimal value
chart.backgroundColor = '#464849';
//RGB value
chart.backgroundColor = 'rgb(13,46,64)';
Chart Type
The following stock chart types are covered:
- Line
- CandlestickOTC (Open-to-Close)
- CandlestickCTC (Close-to-Close)
- HiLo
- OHLC
Data
The stock data is supplied as follows:
chart.data=[{
"Date": "2022-09-01T00:00:00",
"Open": 156.64000,
"High": 158.42000,
"Low": 154.67000,
"Close": 157.96000
},
...,
{
"Date": "2022-11-30T00:00:00",
"Open": 141.39500,
"High": 148.72000,
"Low": 140.55000,
"Close": 148.03000
}];
Some charts don't need all the fields. The table below shows the data fields required for each chart type.
Chart Type | Data Fields |
---|---|
Line | Date, Close |
CandlestickOTC | Date, Open, High, Low, Close |
CandlestickCTC | Date, Open, High, Low, Close |
HiLo | Date, High, Low |
OHLC | Date, Open, High, Low, Close |
Layout
A stock chart has a vertical (price) and a horizontal (date) axis. It can be given a title. Since it represents only one stock, no legend is displayed. When created, the chart uses default layout settings. You can customize the different layout components to give it a different look and feel.
Interactivity
Stock charts are interactive. They support zooming and panning. They can be panned horizontally. The scope is restricted to the range of X values. The maximum and minimum prices always appear.
Plot
The plot function draws a stock chart within a scope delimited by the xMin and xMax parameters. xMin must be less than xMax and both are integer data-item indexes ranging from zero to data array length minus 1.
chart.plot(xMin, xMax);
The parameters are optional. When omitted, they fall back to default values.
Parameter | Default Value |
---|---|
xMin | Zero |
xMax | Data array length minus 1 |
So the following calls to plot may be used:
chart.plot();
chart.plot(xMin);
chart.plot(xMin, xMax);
Examples
The Examples section provides a step-by-step guide to building stock charts with detailed code snippets.