Skip to Content

How to resize the height of Bars in Stacked Bar Chart

Hello, I have developed a stacked bar chart in UI5.

It is working fine in `PC` and in `Ipad's Portrait` orientation. But when it comes to `Ipad's landscape` 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)

My view :

    <f:SimpleForm editable="true" layout="ResponsiveGridLayout"
    id="OEEform" labelSpanL="6"
    labelSpanM="6" adjustLabelSpan="false" emptySpanL="0"
    emptySpanM="0" columnsL="2" columnsM="2">
    <f:content>

    <Label id="idPerformance" visible="true" text="Performance">
    <layoutData>
    <l:GridData span="L5 M5 S5" />
    </layoutData>
    </Label>
    <ProgressIndicator id="idPerformancePI"
    percentValue="0" showValue="true" state="None"
    displayValue="0%" width="100%" />

    <Label id="idAvailability" visible="true" text="Availability">
    <layoutData>
    <l:GridData span="L5 M5 S5" />
    </layoutData>
    </Label>
    <ProgressIndicator id="idAvailabilityPI"
    class="sapUiSmallMarginBottom" percentValue="0"
    displayValue="0%" showValue="true" state="None" width="100%" />

    <core:Title />

    <Label id="idQuality" visible="true" text="Quality">
    <layoutData>
    <l:GridData span="L5 M5 S5" />
    </layoutData>
    </Label>
    <ProgressIndicator id="idQualityPI"
    percentValue="0" displayValue="0%" showValue="true"
    state="None" width="100%" />
    <Label id="idOEE" visible="true" text="OEE">
    <layoutData>
    <l:GridData span="L5 M5 S5" />
    </layoutData>
    </Label>
    <ProgressIndicator id="idOEEPI"
    percentValue="0" displayValue="0%" showValue="true"
    state="None" width="100%" />
    </f:content>
    </f:SimpleForm>
    <viz:Popover id="idPopOver"></viz:Popover>
    <viz:VizFrame id="idVizFrame" uiConfig="{applicationSet:'fiori'}"
     width='100%' vizType='stacked_bar'>
    <viz:dataset>
    <viz.data:FlattenedDataset
    data="{/Rowsets/Rowset/0/Row}">
    <viz.data:dimensions>
    <viz.data:DimensionDefinition
    name="Title" value="{Title}" />
    <!-- <viz.data:DimensionDefinition name="Staco" value="{Staco}" 
    /> -->
    <viz.data:DimensionDefinition
    name="Status" value="{Status}" />
    <!-- <viz.data:DimensionDefinition name="Fat Percentage" 
    value="{Fat Percentage}" /> -->
    </viz.data:dimensions>
    <viz.data:measures>
    <viz.data:MeasureDefinition
    name="Hours" value="{Hours}" />
    </viz.data:measures>
    </viz.data:FlattenedDataset>
    </viz:dataset>
    <viz:feeds>
    <viz.feeds:FeedItem uid="valueAxis"
    type="Measure" values="Hours" />
    <viz.feeds:FeedItem uid="categoryAxis"
    type="Dimension" values="Title" />
    <viz.feeds:FeedItem uid="color" type="Dimension"
    values="Status" />
    <!-- <viz.feeds:FeedItem uid="color" type="Dimension" values="Fat 
    Percentage" /> 
    <viz.feeds:FeedItem uid="waterfallType"
    type="Dimension" values="Type" /> -->
    </viz:feeds>
    </viz:VizFrame>

Now there is only one way where I need to explicitly reduce the heights of the bar when the orientation is landscape. 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.

       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 > 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':[ 

What am I doing wrong? Is there any other way to resize the height of the bar in a bar chart?

issue.jpg (85.3 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

0 Answers