I’ve got this so far… but as you can see the index labels are not in the middle of the circles….
any ideas?
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "light2",
title:{
text: "Attendance"
},
axisY:{
includeZero: false,
interval: 2
},
data: [{
type: "line",
indexLabel: "{y}%",
markerType: "circle",
markerColor: "orange",
markerSize: 36,
indexLabelFontSize: 16,
indexLabelFontColor: "white",
lineColor: "orange",
dataPoints: [
{ label: 'SEP', y: 95 },
{ label: 'OCT', y: 95 },
{ label: 'NOV', y: 95 },
{ label: 'DEC', y: 95 }
]
},
{
type: "line",
indexLabel: "{y}%",
markerType: "circle",
markerColor: "blue",
markerSize: 36,
indexLabelFontSize: 16,
indexLabelFontColor: "white",
lineColor: "blue",
dataPoints: [
{ label: 'SEP', y: 98 },
{ label: 'OCT', y: 92 },
{ label: 'NOV', y: 93 },
{ label: 'DEC', y: 97 }
]
}
],
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</body>
</html>
.
