title: UI5 - How to resize the height of Bars in Stacked Bar Chart
body: <p>I have developed a stacked bar chart in UI5. </p>
  
  <p>It is working fine in <code>PC</code> and in <code>Ipad's Portrait</code> orientation. But when it comes to <code>Ipad's landscape</code> orientation, the chart is becoming small and it shows a scrollbar to access bars which are at the bottom of the chart. I'm not sure why stacked bar chart is not dynamically adjusting the heights of bars.(As shown in figure)</p>
  
  <p><a href="https://i.stack.imgur.com/xN39s.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xN39s.jpg" alt="enter image description here"></a></p>
  
  <p>My view :</p>
  
  <pre><code>&lt;f:SimpleForm editable="true" layout="ResponsiveGridLayout"
  id="OEEform" class="formTitleStyle" labelSpanL="6"
  labelSpanM="6" adjustLabelSpan="false" emptySpanL="0"
  emptySpanM="0" columnsL="2" columnsM="2"&gt;
  &lt;f:content&gt;
  
  &lt;Label id="idPerformance" visible="true" text="Performance"&gt;
      &lt;layoutData&gt;
          &lt;l:GridData span="L5 M5 S5" /&gt;
      &lt;/layoutData&gt;
  &lt;/Label&gt;
  &lt;ProgressIndicator id="idPerformancePI" class="sapUiSmallMarginBottom"
      percentValue="0" showValue="true" state="None"
      displayValue="0%" width="100%" /&gt;
  
  &lt;Label id="idAvailability" visible="true" text="Availability"&gt;
      &lt;layoutData&gt;
          &lt;l:GridData span="L5 M5 S5" /&gt;
      &lt;/layoutData&gt;
  &lt;/Label&gt;
  &lt;ProgressIndicator id="idAvailabilityPI"
      class="sapUiSmallMarginBottom" percentValue="0"
      displayValue="0%" showValue="true" state="None" width="100%" /&gt;
  
  &lt;core:Title /&gt;
  
  &lt;Label id="idQuality" visible="true" text="Quality"&gt;
      &lt;layoutData&gt;
          &lt;l:GridData span="L5 M5 S5" /&gt;
      &lt;/layoutData&gt;
  &lt;/Label&gt;
  &lt;ProgressIndicator id="idQualityPI" class="sapUiSmallMarginBottom"
      percentValue="0" displayValue="0%" showValue="true"
      state="None" width="100%" /&gt;
  
  &lt;Label id="idOEE" visible="true" text="OEE"&gt;
      &lt;layoutData&gt;
          &lt;l:GridData span="L5 M5 S5" /&gt;
      &lt;/layoutData&gt;
  &lt;/Label&gt;
  &lt;ProgressIndicator id="idOEEPI" class="sapUiSmallMarginBottom"
      percentValue="0" displayValue="0%" showValue="true"
      state="None" width="100%" /&gt;
  
  
  &lt;/f:content&gt;
          &lt;/f:SimpleForm&gt;
  
  
      &lt;viz:Popover id="idPopOver"&gt;&lt;/viz:Popover&gt;
      &lt;viz:VizFrame id="idVizFrame" uiConfig="{applicationSet:'fiori'}"
           width='100%' vizType='stacked_bar'&gt;
          &lt;viz:dataset&gt;
  &lt;viz.data:FlattenedDataset
      data="{/Rowsets/Rowset/0/Row}"&gt;
      &lt;viz.data:dimensions&gt;
          &lt;viz.data:DimensionDefinition
  name="Title" value="{Title}" /&gt;
          &lt;!-- &lt;viz.data:DimensionDefinition name="Staco" value="{Staco}" 
  /&gt; --&gt;
          &lt;viz.data:DimensionDefinition
  name="Status" value="{Status}" /&gt;
          &lt;!-- &lt;viz.data:DimensionDefinition name="Fat Percentage" 
  value="{Fat Percentage}" /&gt; --&gt;
      &lt;/viz.data:dimensions&gt;
      &lt;viz.data:measures&gt;
          &lt;viz.data:MeasureDefinition
  name="Hours" value="{Hours}" /&gt;
      &lt;/viz.data:measures&gt;
  &lt;/viz.data:FlattenedDataset&gt;
          &lt;/viz:dataset&gt;
          &lt;viz:feeds&gt;
  &lt;viz.feeds:FeedItem uid="valueAxis"
      type="Measure" values="Hours" /&gt;
  &lt;viz.feeds:FeedItem uid="categoryAxis"
      type="Dimension" values="Title" /&gt;
  &lt;viz.feeds:FeedItem uid="color" type="Dimension"
      values="Status" /&gt;
  &lt;!-- &lt;viz.feeds:FeedItem uid="color" type="Dimension" values="Fat 
      Percentage" /&gt; 
  &lt;viz.feeds:FeedItem uid="waterfallType"
      type="Dimension" values="Type" /&gt; --&gt;
          &lt;/viz:feeds&gt;
      &lt;/viz:VizFrame&gt;
  </code></pre>
  
  <p>Now there is only one way where I need to explicitly reduce the heights of the bar when the orientation is landscape. </p>
  
  <p>I added below code(see the comment) in the controller where I'm assigning properties to the chart but somehow it is not setting up the height.</p>
  
  <pre><code>   oVizFrame.setVizProperties({
  
      valueAxis : {   
          title : {
              visible : true
          }
      },
  
      categoryAxis : {
          title : {
              visible : false
          },
          label:{
              visible:false
          }
      },
  
  
      legend: {
       title: {
           visible: false
       },
       label: {
           text: {
                 positiveValue: "Hours"
           }
       }
      },
  
      plotArea:{
       dataLabel:{
      renderer: function(oParam){
  
       //alert(oParam.dataPointWidth + " -- " + oParam.ctx["Status"]);
  
      if(oParam.dataPointWidth &gt; 300)
      {
          oParam.text = oParam.ctx["Status"] + " (" + oParam.val + ")";
      }
  // Below code is not setting the height of the bar
      if (sap.ui.Device.orientation.landscape === true){
          oParam.dataPointHeight = 10;
      }
       },
       visible : true
       },
      dataPointStyle:{  //Allows to set color,legend and data label based on rules defined.
      'rules':[
  </code></pre>
  
  <p>What am I doing wrong? Is there any other way to resize the height of the bar in a bar chart?</p>