UI5 Chart Legend positioning

[Former Member]

Hello Everyone,

Current Situation:

The default legend in I5 chart is placed on right hand side of chart area.

It will automatically re-size the chart area and legend area.

Now when legend names gets too long, it will reduce chart area largely. Resulting in smaller chart view.

Preventive Thought:

To avoid above situation, I had an idea to put legend area horizontally(may be divided in 2/3 rows) below chart area.

This will prevent chart area re-sizing largely.

But I couldn't find this customization in MII. Please suggest some solution to this problem statement?

Please suggest your Ideas.

Regards,

Minakshi

[saivellanki]

Hi Minakshi,

If you're using sapui5 viz charts, you can use legendGroup property to set the legend at bottom. If legend value is too big, you can use the scrollable property.

       var oDualChart = new sap.viz.ui5.DualLine(

       {

                    id: "dualline",

                      width : "50%",

                    height : "300px",

                legendGroup :new sap.viz.ui5.types.Legend({layout:new sap.viz.ui5.types.Legend_layout({position :sap.viz.ui5.types.legend.Common_position.bottom}) }),

                    legend : new sap.viz.ui5.types.legend.Common({isScrollable:true}),

                    title: {

                      visible : true,

                      text : 'Profit & Measure By Region & Company'

                    },

                    dataset: oDataset

                  }

        );

Final Output will have horizontal scroll bar, showing all legends.

JS Bin - Collaborative JavaScript Debugging

If it is i5 Chart, I need to check on it.

Regards,

Sai Vellanki

[Former Member]

Hello Sai,

Thanks for your immediate response.

But I am not using SAP UI5 Chart.

Instead i am using SAP MII native i5 chart.

Let me know if yoyu figure out any way to do so in i5 chart.

Regards,

Minakshi

[saivellanki]

Can you please help here? Is legend positioning available in i5Charts?

Regards,

Sai Vellanki.

[Private_Member_14935]

Hi Sai, Minakshi,

Positioning of legend is not directly supported in MII i5Chart, but there could be a tweak to it which needs to be checked. I'll check and update.

Thanks and Best Regards,

Ria

[Former Member]

Hello Sai,

Thanks for pointing it out.

Hello Ria,

Looking forward for you help. Thanks.

Regards,

Minakshi

[Former Member]

Hai Sai,

How to move chart legend to center position, am using SAPUI5 charts, as per my knowledge, we have only bottom, top, right and left postion,, is there any way to move to center.?

if yes, please help me.

Thanks in Advance,

Bharath

[saivellanki]

Hi Bharath,

You want to place legend inside the chart - center position / top of chart - center position / bottom of chart - center position?

Yes as per UI5 API, we have only top, bottom, right and left positioning.

JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.viz.ui5.types.Legend_layou...

Regards,

Sai Vellanki.

[Former Member]

Hi Sai,

Thanks for the reply,

i want to place bottom of chart - center position.!!

is it possible,??

please help me.

Thanks in Advance,

Bharath

[saivellanki]

Hi Bharath,

I don't think, legend center position can be possible through UI5 API. But, you might give a try with CSS to achieve your requirement.

You wanted something like below?

Regards,

Sai Vellanki.

[Former Member]

Hi sai,

yes, i want that legend position like that only,

Regards,

Bharath

[Former Member]

Hi Sai,

Can you tell us how did you achieved the vertically stacked legend in the picture? I'm trying to do the same, but placing the legend at the button, results in a horizontally stacked legend items.

Thanks

[saivellanki]

Hi Paulo,

You might need to hack it using DOM manipulation.

A rough code: Plunker

If you spend some time, we can make the code more generic though!

Regards,

Sai Vellanki.

[Former Member]

Thanks for sharing the code, is really what I wanted.

In the meantime I found an workaround for my particular case. Since the width of my chart is small, the legend items are wrapped to multiple lines, ending with a similar effect. I used the following properties

legendGroup : {

                layout : {

                    position : 'bottom',

                    maxWidth : 100,

                    alignment : 'center'

                }

}

[former_member197888]

Hi Paulo,

Can you plz tell how did you bring the text on the column presented in the chart above?