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.