Home forums Using CanvasJS Doughnut not show all labels

Tagged: 

This topic contains 1 reply, has 2 voices, and was last updated by  Indranil Deo 1 week, 5 days ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #24601

    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://canvasjs.com/assets/script/canvasjs.min.js"></script>
    </head>
    <body>
    <div id="chartContainer" style="height: 460px; width: 460px"></div>
    </body>
    </html>
    #24606

    @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)

You must be logged in to reply to this topic.