Color rules in Domo Phoenix

Fatias

Hi all, I am using the DDX Phoenix Scatter Plots App and wanted to apply some color rules like you do in a regular card in Analyzer.

I was looking at the documentation but it is only shown how to change the color palette, not how to apply color rules (ex: if Metric < 1 then red else green). Do you have any suggestion?

https://domoapps.github.io/domo-phoenix/#/domo-phoenix/theming

Thanks

MarkSnodgrass

This will likely involve creating new classes in the CSS section of the DDX brick where you would define your colors. You would then need to go to javascript section and then apply logic to use a certain class based on the values.

MarkSnodgrass

This will likely involve creating new classes in the CSS section of the DDX brick where you would define your colors. You would then need to go to javascript section and then apply logic to use a certain class based on the values.

RichardM

I came looking for an answer to this question, and I am unsure how the suggested solution would work. As far as I am aware, the charts rendered by Phoenix can't be directly affected by CSS. If inspected the chart element is a canvas, with it's only properties that are available are the width, height, margin and padding of the external frame.

If it is possible to add colour rules to a Phoenix chart using CSS + JS, would somebody be able to detail how this is possible?

BraAad

I know this is old but it's the top result if you try and google how to accomplish this, and no answer was available anywhere I could find.

I found a way to do this using the logic from the gradient effect, which allows you to change the colors with conditional formatting. In my case I wanted a specific month to be highlighted, you can use javascript to do that dynamically if you need like the current month highlighted.

In my case, this highlights the current month green while the rest of the bars are blue.

    colorFormats = [
        {
            'condition' : {
                'column' : "Column Name (Month)",
                'operand' : "EQUALS",
                'values': ['Column Value (Current Month)']
            },
            'format' : {
                'color' : "#a2fc8b"
            }
        }
    ]

    var options = {
        width: size.width,
        height: size.height,
        properties: propertyOverrides,
        conditionalFormats: colorFormats
    };