<!DOCTYPE HTML>
<
html
>
<
head
>
<
script
type
=
"text/javascript"
src
=
</
script
>
</
head
>
<
body
>
<
div
style
=
"text-align:center"
>
<
h1
style
=
"color:green"
>GeeksforGeeks</
h1
>
<
h3
>Canvas JS Range Area 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", {
exportEnabled: true,
fillOpacity: .6,
title:{
text: "Temperature in Pune 2023 in current month"
},
axisY: {
title: "Temperature (in Celsius)"
},
axisX: {
valueFormatString: "DD MMMM YY"
},
data: [
{
type: "rangeArea",
xValueFormatString: "DD MMMM YY",
color: "lightgreen",
markerSize: 10,
markerType: "square",
markerColor: "green",
dataPoints: [
{ x: new Date(2023,05,01), y:[14, 27] },
{ x: new Date(2023,05,02), y:[18, 27] },
{ x: new Date(2023,05,03), y:[12, 28] },
{ x: new Date(2023,05,04), y:[17, 25] },
{ x: new Date(2023,05,05), y:[16, 23] },
{ x: new Date(2023,05,05), y:[14, 29] },
{ x: new Date(2023,05,07), y:[19, 27] },
{ x: new Date(2023,05,08), y:[16, 25] },
{ x: new Date(2023,05,09), y:[15, 25] },
{ x: new Date(2023,05,10), y:[11, 23] },
{ x: new Date(2023,05,11), y:[15, 26] },
{ x: new Date(2023,05,12), y:[19, 23] },
{ x: new Date(2023,05,13), y:[14, 19] },
{ x: new Date(2023,05,14), y:[16, 27] },
{ x: new Date(2023,05,15), y:[18, 27] },
{ x: new Date(2023,05,16), y:[17, 24] },
{ x: new Date(2023,05,17), y:[19, 23] },
{ x: new Date(2023,05,18), y:[19, 26] },
{ x: new Date(2023,05,19), y:[20, 30] },
{ x: new Date(2023,05,20), y:[20, 32] },
{ x: new Date(2023,05,21), y:[19, 30] },
{ x: new Date(2023,05,22), y:[21, 23] },
{ x: new Date(2023,05,23), y:[20, 24] },
{ x: new Date(2023,05,24), y:[18, 22] },
{ x: new Date(2023,05,25), y:[18, 22] },
{ x: new Date(2023,05,26), y:[17, 22] },
{ x: new Date(2023,05,27), y:[19, 26] },
{ x: new Date(2023,05,28), y:[19, 31] },
{ x: new Date(2023,05,29), y:[18, 27] },
{ x: new Date(2023,05,30), y:[20, 31] },
]// datapoints
}]// end data
});// canvas chart
// Render chart in the HTML div
chart.render();
}// window onload
</
script
>
</
body
>
</
html
>