Example 2

 

Synopsis

In this example, we create a Close-To-Close Candlestick stock chart for Alphabet Inc. (GOOG) over a three-month period. The X-axis shows dates in yyyy-MM-dd format. The chart initially shows data for the first month. Pan it to the left to visualize the rest of the data.

Chart

The chart's context is a div element named 'chart'. Set the size as you want. 

            
                    <div id="chart">

                    </div>

We create a stock chart, give it a title and set its type. 

            
                    const context = document.getElementById('chart');
                    const chart = new StockChart(context);
                    chart.chartType = 'CandlestickCTC';
                    chart.layout.title = {
                        text: 'GOOG (Alphabet Inc. Class C)',
                        style: {
                            fontSize: 16,
                            fontWeight: 'bold'
                        }
                    };

Data

We plug in GOOG End-Of-Day data fetched from www.tallacoptions.com. The Date, Open, High, Low and Close fields are required. We show a snippet below. Make sure you put the full array of data. 

            
                    chart.data = [{
                        "Date": "2022-09-01T00:00:00",
                        "Open": 109.20000,
                        "High": 111.22000,
                        "Low": 108.19000,
                        "Close": 110.55000
                    },
                    ...,
                    { 
                        "Date": "2022-11-30T00:00:00",
                        "Open": 95.12000,
                        "High": 101.45000,
                        "Low": 94.67000,
                        "Close": 101.45000
                    }];

Customize

We configure the X-axis is to display dates in yyyy-MM-dd format and define the background color of the zooming area. 

                
                    chart.layout.xAxis.tick.text = (d) => d.substr(0, 10);
                    chart.interactivity.zoomRect.fill = 'lightgray';

Plot

We finally call the plot function to display data for the first 21 days, which covers the first-month period. 

                
                    chart.plot(0, 20);

Putting it together

HTML 

                
                    <div id="chart">

                    </div>

JavaScript 

                
                    const context = document.getElementById('chart');
                    const chart = new StockChart(context);
                    chart.chartType = 'CandlestickCTC';
                    chart.layout.title = {
                        text: 'GOOG (Alphabet Inc. Class C)',
                        style: {
                            fontSize: 16,
                            fontWeight: 'bold'
                        }
                    };

                    chart.data = [{
                        "Date": "2022-09-01T00:00:00",
                        "Open": 109.20000,
                        "High": 111.22000,
                        "Low": 108.19000,
                        "Close": 110.55000
                    },
                    ...,
                    { 
                        "Date": "2022-11-30T00:00:00",
                        "Open": 95.12000,
                        "High": 101.45000,
                        "Low": 94.67000,
                        "Close": 101.45000
                    }];

                    chart.layout.xAxis.tick.text = (d) => d.substr(0, 10);
                    chart.interactivity.zoomRect.fill = 'lightgray';

                    chart.plot(0, 20);

Comments

Contents