How to sort legend in stacked column/bar vizframe ?

[former_member319648]

Hello,

By default legend items displayed in the same order they are rendered in the chart which is not the order i would like to have the legend items displayed.

i found this

https://sapui5.netweaver.ondemand.com/docs/vizdocs/index.html#reference/chartProperty/Charts/Bar%20%...

legend.order

bello win part of my code in xml

what should i write in place of the ?????

That's what i don't understand (ok I'm a rookie with js ;-))

As well what should I add to the js file (or maybe I can add all in the xml)

thanks for your help

I tried to create a new function like in my js file

sortChartLegend = function(item1, item2) { var legendlabels = ['A-123', 'B-123', 'C-123', 'D-123', 'E-123', 'F-123']; return legendlabels.indexOf(item1) < legendlabels.indexOf(item2); };

in the following code if i write order: sortChartLegend() then i gte error invalid parameter

        <HBox justifyContent="Center">
            <FlexBox direction="Column" >
                <viz:VizFrame id="myChart" vizType="stacked_column" selectData="onSelectChartData" deselectData="onSelectChartData" vizProperties="{
                    title: { text : 'my chart title',
                             visible: true },
                    tooltip: { visible: true },
                    legend: {
                        isScrollable: false,
                        showFullLabel: true,
                        order: ?????
                    },
                    legendGroup: {
                        layout: {
                            position: 'bottom',
                            alignment: 'center'
                        }
		}

[jigarey]

I'm also trying to figure out how to write the function in legend.order as indicated by "????" in the original question.

[former_member319648]

you can set the legend property this way in the js file:

        // Sort legend by alphabetical order
        this.byId("phaseVizChart").setVizProperties({
            legend: {
                order: function(sPhase1, sPhase2) {
                    return sPhase1.localeCompare(sPhase2);
                }
            }
        });

[jigarey]

that is sorting the legend items -thanks!

I noticed that it also changes the item order in the chart. For e.g. I'm trying to sort on a color dimension "ABC" in a stacked column chart. Each column should have values for "A" at the bottom, "B" in the middle, and "C" on top.

<viz.data:DimensionDefinition name="ABC" value="{ABC}" sorter="{bDescending: true}"/>

When I implemented the order function from above, the dimension ordering flips i.e. "C" is on the bottom, "B" in the middle, "A" at the top.

In other words, can we implement this legend sorting independently of the sorting on the dimension?

API Reference - Demo Kit - SAPUI5 SDK (ondemand.com)