Example 1
Synopsis
In this example, we create an Open-To-Close Candlestick stock chart for Apple Inc. (AAPL) over a three-month period. Dates appear with abbreviated months names. Only 5 ticks are displayed 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 = 'rgb(13,46,64)';
chart.chartType = 'CandlestickOTC';
chart.layout.title = {
text: 'AAPL (Apple Inc.)',
style: {
color: 'white',
fontSize: 16,
fontWeight: 'bold'
}
};
Data
We plug in AAPL 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": 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
}];
Customize
We display dates in custom format along the X-axis. To that end, we create an array of abbreviated month names and a custom function. We hide the Y-axis and show only 5 ticks, no matter the size of the chart. Since the chart has a dark background, all components (axes, ticks, grids...) are shown in white. The zooming area's background color is defined with an RGB color.
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 = {
grid: {
style: {
stroke: 'white'
}
},
tick: {
text: getCustomDate,
style: {
color: 'white',
fontWeight: 'bold'
}
},
style: {
stroke: 'white'
},
spy: {
lineStyle: {
stroke: 'white'
},
rectStyle: {
stroke: 'white',
fill: 'white'
},
textStyle: {
color: 'black'
}
}
};
chart.layout.yAxis = {
visible: false,
grid: {
style: {
stroke: 'white'
}
},
tick: {
placement: 'custom',
style: {
color: 'white'
}
},
spy: {
lineStyle: {
stroke: 'white'
},
rectStyle: {
stroke: 'white',
fill: 'white'
},
textStyle: {
color: 'black'
}
}
};
chart.interactivity.zoomRect.fill = 'rgb(111,162,189)';
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 = 'rgb(13,46,64)';
chart.chartType = 'CandlestickOTC';
chart.layout.title = {
text: 'AAPL (Apple Inc.)',
style: {
color: 'white',
fontSize: 16,
fontWeight: 'bold'
}
};
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
}];
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 = {
grid: {
style: {
stroke: 'white'
}
},
tick: {
text: getCustomDate,
style: {
color: 'white',
fontWeight: 'bold'
}
},
style: {
stroke: 'white'
},
spy: {
lineStyle: {
stroke: 'white'
},
rectStyle: {
stroke: 'white',
fill: 'white'
},
textStyle: {
color: 'black'
}
}
};
chart.layout.yAxis = {
visible: false,
grid: {
style: {
stroke: 'white'
}
},
tick: {
placement: 'custom',
style: {
color: 'white'
}
},
spy: {
lineStyle: {
stroke: 'white'
},
rectStyle: {
stroke: 'white',
fill: 'white'
},
textStyle: {
color: 'black'
}
}
};
chart.interactivity.zoomRect.fill = 'rgb(111,162,189)';
chart.plot();