Example 5

 

Synopsis

In this example, we create an OHLC stock chart for Meta Platforms Inc. (META) over a three-month period. Dates appear with abbreviated months names.

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 and background color. 

            
                    const context = document.getElementById('chart');
                    const chart = new StockChart(context);
                    chart.backgroundColor = 'lightblue';
                    chart.chartType = 'OHLC';
                    chart.chartType = 'OHLC';
                    chart.layout.title = {
                        text: 'META (Meta Platforms Inc.)',
                        style: {
                            fontSize: 16,
                            fontWeight: 'bold'
                        }
                    };

Data

We plug in META 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": 163.58000,
                        "High": 167.35990,
                        "Low": 160.34500,
                        "Close": 165.36000
                    },
                    ...,
                    {
                        "Date": "2022-11-30T00:00:00",
                        "Open": 109.50500, 
                        "High": 118.16000,
                        "Low": 109.38000, 
                        "Close": 118.10000
                    }];

Customize

We show dates in custom format. We hide the Y-axis and set the background color of the zooming area. 

                
                    const ShortMonthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
                                "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
                    function getCustomDate(dateString) {
                        let date = new Date(dateString.substr(0, 10));
                        return ShortMonthNames[date.getMonth()] + ' ' + date.getDate() 
                            + ' ' + date.getFullYear();
                    }

                    chart.layout.yAxis.visible = false;
                    chart.layout.xAxis.tick.text = getCustomDate;
                    chart.interactivity.zoomRect.fill = 'lightgray';

Plot

We finally call the plot function to display the data. 

            
                    chart.plot();

Putting it together

HTML 

            
                    <div id="chart">

                    </div>

JavaScript 

            
                    const context = document.getElementById('chart');
                    const chart = new StockChart(context);
                    chart.backgroundColor = 'lightblue';
                    chart.chartType = 'OHLC';
                    chart.layout.title = {
                        text: 'META (Meta Platforms Inc.)',
                        style: {
                            fontSize: 16,
                            fontWeight: 'bold'
                        }
                    };

                    chart.data = [{
                        "Date": "2022-09-01T00:00:00",
                        "Open": 163.58000,
                        "High": 167.35990,
                        "Low": 160.34500,
                        "Close": 165.36000
                    },
                    ...,
                    {
                        "Date": "2022-11-30T00:00:00",
                        "Open": 109.50500, 
                        "High": 118.16000,
                        "Low": 109.38000, 
                        "Close": 118.10000
                    }];

                    const ShortMonthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
                            "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
                    function getCustomDate(dateString) {
                        let date = new Date(dateString.substr(0, 10));
                        return ShortMonthNames[date.getMonth()] + ' ' + date.getDate() 
                            + ' ' + date.getFullYear();
                    }

                    chart.layout.yAxis.visible = false;
                    chart.layout.xAxis.tick.text = getCustomDate;
                    chart.interactivity.zoomRect.fill = 'lightgray';

                    chart.plot();

Comments

Contents