Home forums Report Bugs Pie charts cut off legends when space is taller

This topic contains 9 replies, has 3 voices, and was last updated by  Bivek Singh 2 months, 3 weeks ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #15487

    Hannah
    Member

    Pie charts cut off legends when they space is higher than wider

    Example

    <!DOCTYPE HTML>
    <html>
    <head>
    <script type="text/javascript">
    window.onload = function () {
    	var chart = new CanvasJS.Chart("chartContainer",
    	{
    		title:{
    			text: "Gaming Consoles Sold in 2012"
    		},
    		data: [
    		{
    			type: "pie",
    			showInLegend: false,
    			legendText: "{indexLabel}",
    			dataPoints: [
    				{ y: 4181563, indexLabel: "PlayStation 3" },
    				{ y: 2175498, indexLabel: "Wii" },
    				{ y: 3125844, indexLabel: "Xbox 360" },
    				{ y: 1176121, indexLabel: "Nintendo DS"},
    				{ y: 1727161, indexLabel: "PSP" },
    				{ y: 4303364, indexLabel: "Nintendo 3DS"},
    				{ y: 1717786, indexLabel: "PS Vita"}
    			]
    		}
    		]
    	});
    	chart.render();
    }
    </script>
    <script type="text/javascript" src="/assets/script/canvasjs.min.js"></script>
    </head>
    <body>
    <div id="chartContainer" style="height: 300px; width: 200px;"></div>
    </body>
    </html>

    #15489

    pieter
    Member

    Hello Hannah,
    Sorry I do not have the answer for your question, but can you please say how you start a thread? Yeah it sounds banal and simple but I do not see the button where to make a thread, and I like to make a thread on this forum as I have a question.

    Thanks for answering

    #15491

    Bivek Singh
    Moderator

    Hannah,

    Legends are not shown as you have set showInLegend to false.

    —-
    Bivek Singh,
    Team CanvasJS

    #15492

    Bivek Singh
    Moderator

    @pieter

    You can click here and scroll to bottom of the page to create a new thread.

    —-
    Bivek Singh,
    Team CanvasJS

    #15575

    Hannah
    Member

    sorry – not the legend on the bottom of the chart, but the data labels. You’ll see they do not display, but when you you make the chart wider they appear.

    This always seems to be an issue when height > width. Here is a side by side example, sama data set, but wide and tall

    Example width vs height

    #15576

    Bivek Singh
    Moderator

    @Hannah

    We tried but couldn’t reproduce the issue at our end. Can you please create a jsFiddle so that we can look into the issue and help you out?

    —-
    Bivek Singh,
    Team CanvasJS

    #15594

    Hannah
    Member

    HI!

    We posted the html for it above, but here you go, also in a fiddle: http://jsfiddle.net/dgct8r0n/

    #15604

    Bivek Singh
    Moderator

    @Hannah,

    This is intended behavior. Some of the indexlabels are skipped to avoid overlapping. You can place indexLabels inside each section of pie using indexLabelPlacement.

    Bivek Singh,
    Team CanvasJS

    #15616

    Hannah
    Member

    Hi Bivek.

    Your documentation says:

    When set to “auto”, the chart automatically decides whether to place labels inside or outside based on the available space.

    This does not work.

    example: http://jsfiddle.net/dgct8r0n/1/

    Looks like we’re going to have to add some custom code to ensure the render space is square, as inside does not work for small segments. Example: http://jsfiddle.net/qcncv0qn/3/

    I urge you to consider this as a bug, and provide improved rendering of labels. I would suggest that when h > w or w > h that the labels are moved upwards or sideways so they can be accommodated properly.

    Thanks

    • This reply was modified 2 months, 4 weeks ago by  Hannah.
    #15657

    Bivek Singh
    Moderator

    Hannah,

    Pie and Doughnut chart doesn’t support auto placement of indexLabels. Thank you for pointing the mistake in our documentation. We have updated it now.

    —-
    Bivek Singh,
    Team CanvasJS

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

You must be logged in to reply to this topic.