<!DOCTYPE HTML>
<
html
>
<
head
>
<
script
type
=
"text/javascript"
</
script
>
</
head
>
<
body
>
<
div
style
=
"text-align:center"
>
<
h1
style
=
"color:green"
>GeeksforGeeks</
h1
>
<
h3
>Canvas JS Multiseries Line 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:
"Multiseries Line Chart for income vs monthly expense"
},
axisX: {
title: "Year",
},
axisY: {
title: "Amount (in Rupees)",
Prefix: " Rs."
},
data: [
{
type: "line",
showInLegend: true,
name: "Maintenance expenses",
color: "red",
toolTipContent:
"<
b
>{name}:</
b
><
br
>in year {label}: Rs.{y}",
dataPoints: [
{ label: "2010", y: 5000 },
{ label: "2012", y: 5500 },
{ label: "2014", y: 5789 },
{ label: "2016", y: 5890 },
{ label: "2018", y: 5998 },
{ label: "2020", y: 6000 },
{ label: "2022", y: 6235 },
{ label: "2024", y: 6789 }
]// end dataPoints
},
{
type: "line",
showInLegend: true,
name: "School expenses",
color: "lightgreen",
toolTipContent:
"<
b
>{name}:</
b
><
br
>in year {label}: Rs.{y}",
dataPoints: [
{ label: "2010", y: 8000 },
{ label: "2012", y: 8500 },
{ label: "2014", y: 9789 },
{ label: "2016", y: 8900 },
{ label: "2018", y: 8998 },
{ label: "2020", y: 9000 },
{ label: "2022", y: 9235 },
{ label: "2024", y: 10789 }
]// end dataPoints
},
{
type: "line",
showInLegend: true,
name: "Food n Groceries",
toolTipContent:
"<
b
>{name}:</
b
><
br
>in year {label}: Rs.{y}",
color: "lightblue",
dataPoints: [
{ label: "2010", y: 12000 },
{ label: "2012", y: 12879 },
{ label: "2014", y: 12999 },
{ label: "2016", y: 13005 },
{ label: "2018", y: 13456 },
{ label: "2020", y: 13879 },
{ label: "2022", y: 14000 },
{ label: "2024", y: 14550 }
]// end dataPoints
},
{
type: "line",
color: "blue",
showInLegend: true,
name: "Monthly Income",
toolTipContent:
"<
b
>{name}:</
b
><
br
>in year {label}: Rs.{y}",
dataPoints: [
{ label: "2010", y: 25000 },
{ label: "2012", y: 26950 },
{ label: "2014", y: 27999 },
{ label: "2016", y: 28000 },
{ label: "2018", y: 29999 },
{ label: "2020", y: 28890 },
{ label: "2022", y: 29000 },
{ label: "2024", y: 31950 }
]// end dataPoints
}
]// end data
});
chart.render();
}// window onload
</
script
>
</
body
>
</
html
>