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

Pie charts cut off legends when space is taller

Viewing 10 posts - 1 through 10 (of 10 total)
  • July 5, 2017 at 8:55 pm #15487

    Hannah

    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="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 200px;"></div>
</body>
</html>

    —

    July 6, 2017 at 1:29 am #15489

    pieter

    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

    July 6, 2017 at 12:23 pm #15491

    Bivek Singh

    Hannah,

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

    —-
    Bivek Singh,
    Team CanvasJS

    July 6, 2017 at 12:47 pm #15492

    Bivek Singh

    @pieter

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

    —-
    Bivek Singh,
    Team CanvasJS

    July 17, 2017 at 7:48 pm #15575

    Hannah

    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

    July 18, 2017 at 9:54 am #15576

    Bivek Singh

    @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

    July 19, 2017 at 5:42 pm #15594

    Hannah

    HI!

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

    July 20, 2017 at 9:54 am #15604

    Bivek Singh

    @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

    July 21, 2017 at 4:05 pm #15616

    Hannah

    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 7 years, 5 months ago by Hannah.
    July 26, 2017 at 7:28 pm #15657

    Bivek Singh

    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.