Synopsis

In this example, we create a Line stock chart for Microsoft Corp. (MSFT) over a three-month period. Both axes and vertical gridlines are hidden. Dates are displayed in custom format.

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 = 'lightgray';
                    chart.chartType = 'Line';
                    chart.layout.title = {
                        text: 'MSFT (Microsoft Corp.)',
                        style: {
                            fontSize: 16,
                            fontWeight: 'bold'
                        }
                    };
                
            

Data

We plug in MSFT End-Of-Day data fetched from www.tallacoptions.com. The Date 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",
                        "Close": 260.40000
                    },
                    ...,
                    {
                        "Date": "2022-11-30T00:00:00",
                        "Close": 255.14000
                    }];
                
            

Customize

We display dates in custom format using abbreviated month names and prepend the stock price with a $ sign. We hide X and Y axes as well as vertical gridlines. We 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();
                    }

                    chart.layout.xAxis = {
                        visible: false,
                        tick: {
                            text: getCustomDate,
                            style: {
                                fontWeight: 'bold'
                            }
                        },
                        grid: {
                            visible: false
                        }
                    };
                    chart.layout.yAxis = {
                        visible: false,
                        tick: {
                            placement: 'custom',
                            nbTicks: 7,
                            text: (y) => '$ ' + y.toFixed(2)
                        },
                        grid: {
                            style: {
                                strokeDashArray: '3 4'
                            }
                        },
                        spy: {
                            visible: false
                        }
                    };
                    chart.interactivity.zoomRect.fill = 'white';
                
            

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 = 'lightgray';
                    chart.chartType = 'Line';
                    chart.layout.title = {
                        text: 'MSFT (Microsoft Corp.)',
                        style: {
                            fontSize: 16,
                            fontWeight: 'bold'
                        }
                    };

                    chart.data = [{
                        "Date": "2022-09-01T00:00:00",
                        "Close": 260.40000
                    },
                    ...,
                    {
                        "Date": "2022-11-30T00:00:00",
                        "Close": 255.14000
                    }];

                    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();
                    }

                    chart.layout.xAxis = {
                        visible: false,
                        tick: {
                            text: getCustomDate,
                            style: {
                                fontWeight: 'bold'
                            }
                        },
                        grid: {
                            visible: false
                        }
                    };
                    chart.layout.yAxis = {
                        visible: false,
                        tick: {
                            placement: 'custom',
                            nbTicks: 7,
                            text: (y) => '$ ' + y.toFixed(2)
                        },
                        grid: {
                            style: {
                                strokeDashArray: '3 4'
                            }
                        },
                        spy: {
                            visible: false
                        }
                    };
                    chart.interactivity.zoomRect.fill = 'white';

                    chart.plot();