You must be logged in to post your query.
Home › Forums › Report Bugs › Pie charts cut off legends when space is taller
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>
—
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
Hannah,
Legends are not shown as you have set showInLegend to false.
—- Bivek Singh, Team CanvasJS
@pieter
You can click here and scroll to bottom of the page to create a new thread.
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
@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?
HI!
We posted the html for it above, but here you go, also in a fiddle: http://jsfiddle.net/dgct8r0n/
@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
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
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.
You must be logged in to reply to this topic. Login/Register