How to reverse the order of colors coming from PowerBI schema

Question

I use pbiColorNominal in the Deneb for coloring a custom stacked bar chart. The order of colors in such chart is reversed comparing to a similar out-of-the box stacked bar visual.

Is there a way to reverse the order of colors imported via pbiColorNominal? Any other workarounds?

[PBIX](https://drive.google.com/file/d/1YyK_cVq5B4HfOlit7r4TQbyojeCocuKL) — VladB, Mar 01 '23 at 17:25
Some pictures: https://drive.google.com/file/d/1B-2SszIxiXZYtv7J0F4Ae3938eaE2cpn https://drive.google.com/file/d/1Ofw1mcd3H3w83cgsYljYacyAe7YGndnP — VladB, Mar 01 '23 at 17:29

score 0 · Answer 1 · answered Mar 01 '23 at 07:06

Yes, you can reverse the order of colors in a custom stacked bar chart that uses pbiColorNominal by using the reverse() function to reverse the order of the color values in the array that is passed to pbiColorNominal.

Please see the example below, which show how you can reverse the order of colors:

let colors = ['#FF0000', '#00FF00', '#0000FF'];
let colorScale = visuals.colors.createColorScale('categorical', { colors: colors.reverse() });

visuals.colors.SQExprUtils.exprFromResultName('Category')
    .getMetadata({ kind: SQExprKind.Column })
    .then(columnMetadata => {
        let colorExpr = visuals.createStaticEval('Category', columnMetadata);
        let colorFunc = colorScale.getKeyColor.bind(colorScale);
        let colorExprVal = visuals.converterHelper.colorExpressionRewriter(colorExpr.expr, colorFunc);
        let colorExprRewritten = { expr: colorExprVal, source: 'Color' };

        let stackedBarChart = new visuals.StackedBarChart('divId', colorExprRewritten);
        // Use the stacked bar chart as desired
    });

The colors array, in the example above, is reversed using the reverse() function before being passed to pbiColorNominal.

Are you talking about Deneb (aka Vega/Vega-Light Visual in Power BI) ? — VladB, Mar 01 '23 at 07:24
Never mind. In vega-light I was able to use "scale":{"reverse":true} in the color encoding channel to reverse the colors taken from the schema. **But that's not what I want.** Deneb / vega-light assigns the first color from the schema to the topmost element of the stacked bar. I want it to start assigning colors from the bottom, so it's consistent with how the standard power bi visuals work. — VladB, Mar 01 '23 at 08:03

score 0 · Accepted Answer · answered Mar 01 '23 at 17:47

0

I can't open your .pbix but from the screenshots, it looks like colours are assigned correctly but the stack is in a different order. To order the elements in a stack, use the order attribute as described here: https://vega.github.io/vega-lite/docs/stack.html#sorting-stack-order

answered Mar 01 '23 at 17:47

Davide Bacci

16,647
3
10
36

Adding `"order": {"field": "LegendField"}` helped. Thanks! – VladB Mar 01 '23 at 19:04

How to reverse the order of colors coming from PowerBI schema

2 Answers2