Show legends for a donut chart in another element

[former_member604660]

I have 2 donut charts side by side and they have the same legend group items. Each chart is in a vizFrame and has a width. I want to display them in a common HBox below these charts. Currently, if I make legends visible for one chart and hidden for other, few of the legend items are not visible due to width constraints of viz frame and go into "ellipses". So displaying for only one chart did not resolve the issue. I tried to go over documentation for donut charts on the below link. I saw a number of properties for layout and layout alignment, position. There is one property for LegendGroup:renderTo which seemed like a good fit to display legend items in another container. But I am not sure how to use it. As I tried to pass it the DOM element ID where I want to display the legends but it throws error "r is not a function"

https://sapui5.hana.ondemand.com/1.52.9/docs/vizdocs/index.html#reference/chartProperty/Charts/Pie%2...

legendGroup.renderTo : Legend Group can render to an additional DOM Element. Its return value must be Dom Element.

Please advise if there is any way to display legends into another container

View1.xml

<HBox id="ChartContainer" justifyContent="Center" width="500px">
	<viz:VizFrame id="Chart1" vizType="donut" height="150px" width="250px"></viz:VizFrame>	
        <viz:VizFrame id="Chart2" vizType="donut" height="150px" width="250px"></viz:VizFrame>
</HBox>
<HBox id="LegendContainer" width="100px" height="100px"></HBox>

View1.controller.js

drawDonutChart: function (data) {
			var oVizFrame = controller.getView().byId("Chart1");
			if (oVizFrame !== undefined) {
				oVizFrame.destroyFeeds();
				oVizFrame.destroyDataset();
			}
			var oDataset = new sap.viz.ui5.data.FlattenedDataset({
				dimensions: [{
					name: 'Employee Status',
					value: "{EmployeeStatus}"
				}],


				measures: [{
					name: 'Salary',
					value: '{Salary}'
				}],


				data: {
					path: "modelName>/DonutChart/EmpSalary"
				}
			});
			oVizFrame.setDataset(oDataset);
			oVizFrame.setVizType('donut');
			oVizFrame.setVizProperties({
				tooltip: {
					visible: true
				},
				title: {
					visible: true,
					text: "Emp Salary"
				},
				legend: {
					showFullLabel: true,
					visible: true,
					postRenderer: function (legends) {
						console.log(legends);
					}
				},
				legendGroup: {
					// 	layout: {
					// 		alignment: "center",
					// 		position: "bottom"
					// 	},
					*renderTo: document.getElementById("LegendContainer")*
 // this seems to be a good option but results in error
				},
				dataLabel: {
					line: {
						visible: true,
						color: "#a8a8a8"
					},
					type: "value",
					visible: true,
					distance: 0.25
				}
			});


			var feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
					'uid': "size",
					'type': "Measure",
					'values': ["Salary"]
				}),


				feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
					'uid': "color",
					'type': "Dimension",
					'values': ["Employee Status"]
				});
			oVizFrame.addFeed(feedValueAxis);
			oVizFrame.addFeed(feedCategoryAxis);
		}