Problem with InteractiveDonutChart on GeoMap and AnalyticMap

[Former Member]

I put InteractiveDonutChart to GeoMap or AnalyticMap in controller. On webrowser(google chrome) after site is rendered donut chart is disappears and show no errors in console.

This is my fragment of code:

- in //test comments i try used other type of microchart and it's work.

- and

var conteners = new sap.ui.vbm.Containers();
var oGeoMap  = this.getView().byId("GeoMap");
var donutChart = new sap.suite.ui.microchart.InteractiveDonutChart
({
	displayedSegments:2,
	selectionEnabled:false,
});
				
var seg1 = new sap.suite.ui.microchart.InteractiveDonutChartSegment
({
	label: "Test 1",
	value: 75
});
				
var seg2 = new sap.suite.ui.microchart.InteractiveDonutChartSegment
({
	label: "Test 1",
	value: 25
 });
				
donutChart.addSegment(seg1);
donutChart.addSegment(seg2);
var contener = new sap.ui.vbm.Container({ 
	position: "21.050;52.342",
});
//donut
contener.setItem(donutChart);
//test
/*				contener.setItem(new sap.suite.ui.microchart.HarveyBallMicroChart({
			         size: "S",
			         total: 100,
			         totalScale:"Mrd",
			         showTotal: false,
			         items: [ 
			         new sap.suite.ui.microchart.HarveyBallMicroChartItem({
			            fraction: 63,
			            fractionScale: "Mrd",
			            color: "Good"
			         })]
			      }));*/
				
conteners.addItem(contener);
				
console.log(conteners);
oGeoMap.addVo(conteners);

[Former Member · Accepted solution]

I resolved this problem by adding

InteractiveDonutChart to FlexBox before putting it to Contener. Size of FlexBox it's very important.

var containers = new sap.ui.vbm.Containers();
var contener = new sap.ui.vbm.Container({ 
                position: cities.lat+";"+cities.lon,
            });
var flexBox = new sap.m.FlexBox({
                width:"15rem",
                height:"10rem",
                direction:sap.m.FlexDirection.Column,
                backgroundDesign:sap.m.BackgroundDesign.Solid,
                justifyContent:sap.m.FlexJustifyContent.End
            });    
            var donutChart = new InteractiveDonutChart({
                displayedSegments:5,
                selectionEnabled:true,
            });

//iterative creation of segments (5 times)

...

donutChart.addSegment(
                         new InteractiveDonutChartSegment({
                             label:cities.data[i].tariff,
                             value:(cities.data[i].customers/100)*100
                         })
                    );

...
flexBox.addItem(donutChart);
            var contener = new sap.ui.vbm.Container({ 
                position: cities.lat+";"+cities.lon,
            });
            
contener.setItem(flexBox);

containers.addItem(contener);

//and containers put to GeoMapp object.