<!DOCTYPE HTML>
<
html
>
<
head
>
<
meta
charset
=
"UTF-8"
>
</
script
>
</
head
>
<
body
>
<
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: "Half yearly Sales and Expense Report 2023"
},
data: [
{
type: "waterfall",
risingColor: "orange",
fallingColor: "pink",
dataPoints: [
{ label: "Sales in Jan", y: 2000 },
{ label: "Expense in Jan", y: -800 },
{ label: "Sales in Feb", y: 1500 },
{ label: "Expense in Feb", y: -1000 },
{ label: "Sales in Mar", y: 1700 },
{ label: "Expense in Mar", y: -900 },
{
label: "Quaterly total",
isIntermediateSum: true, color: "brown"
},
{ label: "Sales in April", y: 1800 },
{ label: "Expense in April", y: -700 },
{ label: "Sales in May", y: 2100 },
{ label: "Expense in May", y: -600 },
{ label: "Sales in June", y: 1800 },
{ label: "Expense in June", y: -800 },
// automatically calculates the sum of the dataPoints
{
label: "Total", isCumulativeSum: true,
color: "green"
}
]// end dataPoints
}
]// end data
}); //end CanvasJS.Chart
chart.render();
}// end window onload
</
script
>
</
body
>
</
html
>