JavaScript
var chart = new CanvasJS.Chart("chartContainer", {
data: [
{
type: "column",
color: "#00b5bb",
dataPoints: [
{ x: 10, y: 31 },
{ x: 20, y: 55 },
{ x: 30, y: 60 },
{ x: 40, y: 66 },
{ x: 50, y: 75 },
{ x: 60, y: 88 },
{ x: 70, y: 98 },
{ x: 80, y: 74 }
]
},
{
type: "column",
color: "#ba00ac",
dataPoints: [
{ x: 10, y: 33 },
{ x: 20, y: 47 },
{ x: 30, y: 59 },
{ x: 40, y: 59 },
{ x: 50, y: 78 },
{ x: 60, y: 70 },
{ x: 70, y: 79 },
{ x: 80, y: 45 }
]
},
{
type: "column",
color: "#ffe81b",
dataPoints: [
{ x: 10, y: 38 },
{ x: 20, y: 59 },
{ x: 30, y: 67 },
{ x: 40, y: 72 },
{ x: 50, y: 61 },
{ x: 60, y: 85 },
{ x: 70, y: 71 },
{ x: 80, y: 55 }
]
},
{
type: "line",
markerSize: 0,
color: "#00b5bb",
dataPoints: [
{ x: 10, y: 31 },
{ x: 20, y: 55 },
{ x: 30, y: 60 },
{ x: 40, y: 66 },
{ x: 50, y: 75 },
{ x: 60, y: 88 },
{ x: 70, y: 98 },
{ x: 80, y: 104 }
]
},
{
type: "line",
markerSize: 0,
color: "#ba00ac",
dataPoints: [
{ x: 10, y: 33 },
{ x: 20, y: 67 },
{ x: 30, y: 73 },
{ x: 40, y: 89 },
{ x: 50, y: 89 },
{ x: 60, y: 100 },
{ x: 70, y: 109 },
{ x: 80, y: 125 }
]
},
{
type: "line",
markerSize: 0,
color: "#ffe81b",
dataPoints: [
{ x: 10, y: 38 },
{ x: 20, y: 77 },
{ x: 30, y: 84 },
{ x: 40, y: 99 },
{ x: 50, y: 107 },
{ x: 60, y: 112 },
{ x: 70, y: 120 },
{ x: 80, y: 136 }
]
}
]
});
chart.render();