Synopsis

In this example, we create a HiLo stock chart for Amazon. Inc. (AMZN) over a three-month period. We hide the Y-axis and show prices with three decimal places. Dates appear with abbreviated months names. Only 3 ticks appear on the Y-axis regardless of the chart's size.

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 = 'lightgreen';
                    chart.chartType = 'HiLo';
                    chart.layout.title = {
                        text: 'AMZN (Amazon.com Inc.)',
                        style: {
                            fontSize: 16,
                            fontWeight: 'bold'
                        }
                    };
                
            

Data

We plug in AMZN End-Of-Day data fetched from www.tallacoptions.com. The Date, High and Low 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",
                        "High": 128.02000,
                        "Low": 123.66000
                    },
                    ...,
                    {
                        "Date": "2022-11-30T00:00:00",
                        "High": 96.54000,
                        "Low": 91.52500
                    }];
                
            

Customize

We hide the Y-axis and show prices with three decimal places. We configure the X-axis to display dates in custom format and define the background color of the zooming area. We also style the axis spies

            
                    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,
                        tick: {
                            text: (d)=>d.toFixed(3),
                            placement: 'custom',
                            nbTicks: 3
                        },
                        spy: {
                            lineStyle: {
                                stroke: 'gray'
                            },
                            rectStyle: {
                                cornerRadius: 5,
                                stroke: 'white',
                                fill: 'gray'
                            }
                        }
                    };
                    chart.layout.xAxis = {
                        tick: {
                            text: getCustomDate
                        },
                        spy: {
                            lineStyle: {
                                stroke: 'gray'
                            },
                            rectStyle: {
                                cornerRadius: 5,
                                stroke: 'white',
                                fill: 'gray'
                            }
                        }
                    };
                    chart.interactivity.zoomRect.fill = 'lightblue';
                
            

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 = 'lightgreen';
                    chart.chartType = 'HiLo';
                    chart.layout.title = {
                        text: 'AMZN (Amazon.com Inc.)',
                        style: {
                            fontSize: 16,
                            fontWeight: 'bold'
                        }
                    };

                    chart.data = [{
                        "Date": "2022-09-01T00:00:00",
                        "High": 128.02000,
                        "Low": 123.66000
                    },
                    ...,
                    {
                        "Date": "2022-11-30T00:00:00",
                        "High": 96.54000,
                        "Low": 91.52500
                    }];

                    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,
                        tick: {
                            text: (d)=>d.toFixed(3),
                            placement: 'custom',
                            nbTicks: 3
                        },
                        spy: {
                            lineStyle: {
                                stroke: 'gray'
                            },
                            rectStyle: {
                                cornerRadius: 5,
                                stroke: 'white',
                                fill: 'gray'
                            }
                        }
                    };
                    chart.layout.xAxis = {
                        tick: {
                            text: getCustomDate
                        },
                        spy: {
                            lineStyle: {
                                stroke: 'gray'
                            },
                            rectStyle: {
                                cornerRadius: 5,
                                stroke: 'white',
                                fill: 'gray'
                            }
                        }
                    };
                    chart.interactivity.zoomRect.fill = 'lightblue';

                    chart.plot();