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)
  • #15487

    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>

    #15489

    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

    Hannah,

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

    —-
    Bivek Singh,
    Team CanvasJS

    #15492

    @pieter

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

    —-
    Bivek Singh,
    Team CanvasJS

    #15575

    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

    @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

    HI!

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

    #15604

    @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

    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, 4 months ago by Hannah.
    #15657

    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.