Home › Forums › Chart Support › Doughnut not show all labels

Doughnut not show all labels

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

Tagged: 

  • March 11, 2019 at 10:33 am #24601

    nguoikhivohinh

    I have example doughnut chart and it’s not working show all labels

    <!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
	var chart = new CanvasJS.Chart("chartContainer", {
		 title:{
      text: "indexLabel wrap in doughnut",
        fontSize: 20,
      },
        animationEnabled: true,
      data: [
      {        
        type: "doughnut",
         startAngle: 270,
         innerRadius: 80,
        indexLabel: " #percent %",
        indexLabelFontColor : "black",
        indexLabelPlacement: "outside", 
        indexLabelWrap: true ,
        dataPoints: [
          {  y: 280, label : "some label" },          
          { y: 148,label : "other label" },
          {  y: 16, label : "some other label"},
          {  y: 32, label : "label" }  ,
           {  y: 12, label : "label" }  
        ]
      }
      ]
    });
	chart.render();
}
</script>
<script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 460px; width: 460px"></div>
</body>
</html>
    March 11, 2019 at 11:09 pm #24606

    Indranil

    @nguoikhivohinh,

    In the above code snippet, indexLabels are skipped when there is limited space available for the indexLabels to display or when they get too close to other indexLabels (to avoid overlapping) – this behavior is by design. By changing startAngle by few values, it’s possible to display more indexLabels. Please take a look at this updated JSFiddle.

    ___________
    Indranil Deo,
    Team CanvasJS

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

Tagged: 

You must be logged in to reply to this topic.