Example 6
Synopsis
In this example, we create a Line stock chart for Tesla Inc. (TSLA) over a three-month period. We only show the X-axis with a thick line. 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 = 'lightcoral';
chart.chartType = 'Line';
chart.layout.title = {
text: 'TSLA (Tesla Inc.)',
style: {
color: 'white',
fontSize: 16,
fontWeight: 'bold'
}
};
Data
We plug in TSLA 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":277.16000
},
...,
{
"Date":"2022-11-30T00:00:00",
"Close":194.70000
}];
Customize
We use abbreviated month names to display dates in custom format. We hide the Y-axis and display only 5 price ticks. The X-axis is made thicker than usual. The axis spies and zooming area are also styled.
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 = {
style: {
stroke: 'white',
strokeWidth:3
},
tick: {
text: getCustomDate,
style: {
color: 'white'
}
},
grid: {
style: {
stroke: 'white',
strokeDashArray: '1 4'
}
},
spy: {
lineStyle: {
stroke: 'white'
},
rectStyle: {
stroke: 'white',
fill: 'white',
cornerRadius: 5
},
textStyle: {
color: 'red'
}
}
};
chart.layout.yAxis = {
visible: false,
tick: {
placement: 'custom',
style: {
color: 'white'
}
},
grid: {
style: {
stroke: 'white',
strokeDashArray:'1 4'
}
},
spy: {
lineStyle: {
stroke: 'white'
},
rectStyle: {
stroke: 'white',
fill: 'white',
cornerRadius: 5
},
textStyle: {
color: 'red'
}
}
};
chart.interactivity.zoomRect = {
stroke: 'brown',
strokeWidth: 2,
strokeDashArray: 'none',
fill: 'rosybrown'
};
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 = 'lightcoral';
chart.chartType = 'Line';
chart.layout.title = {
text: 'TSLA (Tesla Inc.)',
style: {
color: 'white',
fontSize: 16,
fontWeight: 'bold'
}
};
chart.data = [{
"Date":"2022-09-01T00:00:00",
"Close":277.16000
},
...,
{
"Date":"2022-11-30T00:00:00",
"Close":194.70000
}];
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 = {
style: {
stroke: 'white',
strokeWidth:3
},
tick: {
text: getCustomDate,
style: {
color: 'white'
}
},
grid: {
style: {
stroke: 'white',
strokeDashArray: '1 4'
}
},
spy: {
lineStyle: {
stroke: 'white'
},
rectStyle: {
stroke: 'white',
fill: 'white',
cornerRadius: 5
},
textStyle: {
color: 'red'
}
}
};
chart.layout.yAxis = {
visible: false,
tick: {
placement: 'custom',
style: {
color: 'white'
}
},
grid: {
style: {
stroke: 'white',
strokeDashArray:'1 4'
}
},
spy: {
lineStyle: {
stroke: 'white'
},
rectStyle: {
stroke: 'white',
fill: 'white',
cornerRadius: 5
},
textStyle: {
color: 'red'
}
}
};
chart.interactivity.zoomRect = {
stroke: 'brown',
strokeWidth: 2,
strokeDashArray: 'none',
fill: 'rosybrown'
};
chart.plot();