<!DOCTYPE HTML>
<
html
>
<
head
>
<
script
type
=
"text/javascript"
src
=
</
script
>
<
script
type
=
"text/javascript"
src
=
</
script
>
</
head
>
<
body
>
<
div
style
=
"text-align:center"
>
<
h1
style
=
"color:green"
>GeeksforGeeks</
h1
>
<
h3
>Canvas JS Candlestick Line Financial Chart </
h3
>
</
div
>
<
div
id
=
"chartID"
style="height:400px; max-width:950px;
margin:0px auto;">
</
div
>
<
script
>
window.onload = function () {
var chart = new CanvasJS.Chart("chartID", {
title: {
text: "Showing Stock Prices of a week"
},
axisY: {
prefix: "Rs.",
title: "Stock Prices(in.Indian Rupees )",
},
axisX: {
valueFormatString: "DD MMM YY"
},
data: [
{
type: "candlestick",
showInLegend: true,
name: "Stock Price",
yValueFormatString: "Rs.##00.00",
xValueFormatString: "DD MMM YY",
dataPoints: [
{ x: new Date(2022,0,01),
y: [21.000787, 36.100091,33.000888,37.111222] },
{ x: new Date(2022,01,01),
y: [34.080002, 36.060001, 33.410000, 36.060001]},
{ x: new Date(2022,02,01),
y: [40.250001, 41.500000, 37.540009, 41.880001]},
{ x: new Date(2022,03,01),
y: [24.250001, 40.890002,39.000111,40.091234] },
{ x: new Date(2022,04,01),
y: [17.256777, 23.099888,22.000333,25.111333] },
{ x: new Date(2022,05,01),
y: [18.710001, 34.700005,32.099002,34.000111] },
{ x: new Date(2022,06,01),
y: [21.100002, 42.099888,43.890002,44.000234] },
{ x: new Date(2022,07,01),
y: [18.710001, 34.700005,32.099002,34.000111] },
{ x: new Date(2022,08,01),
y: [21.100002, 42.099888,43.890002,44.000234] },
{ x: new Date(2022,09,01),
y: [18.710001, 34.700005,32.099002,34.000111] },
{ x: new Date(2022,10,01),
y: [21.100002, 42.099888,43.890002,44.000234] }
]
},
{
type: "line",
showInLegend: true,
yValueFormatString: "Rs.##00.00cr",
xValueFormatString: "DD MMM YY",
name: "Revenue generated",
axisYType: "secondary",
dataPoints:[
{ x: new Date(2022,01,11), y: 25.234 },
{ x: new Date(2022,03,15), y: 26.010 },
{ x: new Date(2022,05,18), y: 28.540 },
{ x: new Date(2022,07,20), y: 29.001 },
{ x: new Date(2022,09,22), y: 20.099 }
]
},
{
type: "line",
showInLegend: true,
yValueFormatString: "Rs.##00.00cr",
xValueFormatString: "DD MMM YY",
name: "Net Income",
axisYType: "secondary",
dataPoints:[
{ x: new Date(2022,01,11), y: 15.234 },
{ x: new Date(2022,03,15), y: 16.010 },
{ x: new Date(2022,05,18), y: 18.540 },
{ x: new Date(2022,07,20), y: 19.001 },
{ x: new Date(2022,09,22), y: 18.999 }
]
}
],// end data
});// end chart
chart.render();
}// window onload
</
script
>
</
body
>
</
html
>