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


    <script type="text/javascript">
    window.onload = function () {
    	var chart = new CanvasJS.Chart("chartContainer",
    			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"}
    <script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
    <div id="chartContainer" style="height: 300px; width: 200px;"></div>


    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



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

    Bivek Singh,
    Team CanvasJS



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

    Bivek Singh,
    Team CanvasJS


    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



    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



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



    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


    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.


    • This reply was modified 6 years, 2 months ago by 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.