line graph with values inside data points

This topic has 4 replies, 3 voices, and was last updated 5 years, 2 months ago by Shashi Ranjan.

Viewing 5 posts - 1 through 5 (of 5 total)

February 19, 2019 at 10:41 pm #24393

Hi,
is it possible to put the value of the data inside the point on a line graph? I can change the size / colour and shape, but not put the value inside?

February 19, 2019 at 11:20 pm #24394

haverer

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>

February 21, 2019 at 12:47 am #24409