Anychart donut chart does not put legend to the right - anychart

Question

I am using Anychart to generate a donut chart on a test website. I have the following code in my web page:
<div id="container" style="width: 500px; height: 400px;">
<script language="javascript">
var data = anychart.data.set([
['aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa', 34],
['bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb', 21],
['cccccccccccccccccccccccccccccccccccccccc', 15],
['dddddddddddddddddddddddddddddddddddddddd', 11],
['eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee', 6],
['ffffffffffffffffffffffffffffffffffffffff', 13]]);
// create a pie chart with the data
var chart = anychart.pie(data)
// set the chart radius making a donut chart
chart.innerRadius('55%');
// set the position of labels
chart.labels().position('outside');
//chart.legend().position('right').itemsLayout('vertical');
chart.title('')
chart.container('container');
chart.draw();
</script>
</div>
This generates a nice donut chart but the legends are generated at the bottom of the chart with right and left arrows so the user can scroll through the legend.
When I uncomment the chart.legend().position('right').itemsLayout('vertical') command, the legends get generated to the right of the chart, but the chart disappears. Here is a screen print of the before and after.
Any idea on how to get the legend to appear to the right of the donut? Eventually, I will be using this to dynamically generate the chart so there is the possibility of being up to 50 data points.
Thank you.

Answer 1

It is expected behavior because the legend items have very long text. To solve the issue you should limit the legend width to provide more space for the chart itself. Simply add the line below:
chart.legend().width('30%').padding(0);
You can adjust the desired width in percents or pixels .width(100);.