Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

The ultimate Microsoft Fabric, Power BI, Azure AI & SQL learning event! Join us in Las Vegas from March 26-28, 2024. Use code MSCUST for a $100 discount. Register Now

Reply
DW868990
Advocate II
Advocate II

Vega Lite - Text color based on condition, so next white when darker background

Hi,

 

I am trying to get the Text color of the my Text Mark to be white when the value is over a 1000.

 

My vega-lite code is below and is not returning the color change, any help in what i am missing is appreciated.

 

{
"data": {"name": "dataset"},
"layer": [
{
"mark": "rect",
"encoding": {
"x": {"field": "Category",
"type": "nominal"
},
"y": {"field": "Sales", "type": "ordinal",
"bin":{"maxbins":10}},
"color": {"aggregate": "count", "field": "CustomerID"},
"tooltip": [
{"field": "Category", "type": "ordinal"},
{"aggregate": "count","field": "Metric", "type":"quantitative"}
]
}
},
{
"mark": {
"type": "text",
"dy":60,
"dx":-50
},
"encoding": {
"x": {"field": "Category",
"type": "nominal"
},
"y": {"field": "Sales", "type": "ordinal",
"bin":{"maxbins":10}},
"text": {"aggregate": "count","field": "CustomerID", "type": "quantitative"},
"color": {
"condition": {
"test": "datum['CustomerID'] < 1000",
"value": "white"},
"value": "black"
}
}
}
],
"config": {
"axis": {"grid": true, "tickBand": "extent"}
}
}

1 ACCEPTED SOLUTION
dm-p
Super User
Super User

Hi @DW868990,

In your condition, you have the following test to set the color to white, and this is using the "less than" (<) symbol:

"test": "datum['CustomerID'] < 1000",

As you want the color to be set if the value exceeds 1000, I'd suggest changing this to use the "greater than" (>) symbol, e.g.:

"test": "datum['CustomerID'] > 1000",

Alternative approach

As using the color encoding channel will create a scale that might cause issues if you bind color elsewhere in your spec, you could also try using the color property in the mark directly, which is better suited for this use case. HEre's how I'd re-write your spec by removing the encoding channel and binding this to the mark's color property using an ExprRef, like this (lines 21-23):

{
  "data": { "name": "dataset" },
  "layer": [
    {
      "mark": "rect",
      "encoding": {
        "x": { "field": "Category", "type": "nominal" },
        "y": { "field": "Sales", "type": "ordinal", "bin": { "maxbins": 10 } },
        "color": { "aggregate": "count", "field": "CustomerID" },
        "tooltip": [
          { "field": "Category", "type": "ordinal" },
          { "aggregate": "count", "field": "Metric", "type": "quantitative" }
        ]
      }
    },
    {
      "mark": {
        "type": "text",
        "dy": 60,
        "dx": -50,
        "color": {
            "expr": "datum['CustomerID'] > 1000 ? 'white' : 'black'"
        }
      },
      "encoding": {
        "x": { "field": "Category", "type": "nominal" },
        "y": { "field": "Sales", "type": "ordinal", "bin": { "maxbins": 10 } },
        "text": {
          "aggregate": "count",
          "field": "CustomerID",
          "type": "quantitative"
        }
      }
    }
  ],
  "config": {
    "axis": { "grid": true, "tickBand": "extent" }
  }
}

Regards,

Daniel





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




View solution in original post

1 REPLY 1
dm-p
Super User
Super User

Hi @DW868990,

In your condition, you have the following test to set the color to white, and this is using the "less than" (<) symbol:

"test": "datum['CustomerID'] < 1000",

As you want the color to be set if the value exceeds 1000, I'd suggest changing this to use the "greater than" (>) symbol, e.g.:

"test": "datum['CustomerID'] > 1000",

Alternative approach

As using the color encoding channel will create a scale that might cause issues if you bind color elsewhere in your spec, you could also try using the color property in the mark directly, which is better suited for this use case. HEre's how I'd re-write your spec by removing the encoding channel and binding this to the mark's color property using an ExprRef, like this (lines 21-23):

{
  "data": { "name": "dataset" },
  "layer": [
    {
      "mark": "rect",
      "encoding": {
        "x": { "field": "Category", "type": "nominal" },
        "y": { "field": "Sales", "type": "ordinal", "bin": { "maxbins": 10 } },
        "color": { "aggregate": "count", "field": "CustomerID" },
        "tooltip": [
          { "field": "Category", "type": "ordinal" },
          { "aggregate": "count", "field": "Metric", "type": "quantitative" }
        ]
      }
    },
    {
      "mark": {
        "type": "text",
        "dy": 60,
        "dx": -50,
        "color": {
            "expr": "datum['CustomerID'] > 1000 ? 'white' : 'black'"
        }
      },
      "encoding": {
        "x": { "field": "Category", "type": "nominal" },
        "y": { "field": "Sales", "type": "ordinal", "bin": { "maxbins": 10 } },
        "text": {
          "aggregate": "count",
          "field": "CustomerID",
          "type": "quantitative"
        }
      }
    }
  ],
  "config": {
    "axis": { "grid": true, "tickBand": "extent" }
  }
}

Regards,

Daniel





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




Helpful resources

Announcements
Fabric Community Conference

Microsoft Fabric Community Conference

Join us at our first-ever Microsoft Fabric Community Conference, March 26-28, 2024 in Las Vegas with 100+ sessions by community experts and Microsoft engineering.

February 2024 Update Carousel

Power BI Monthly Update - February 2024

Check out the February 2024 Power BI update to learn about new features.

Fabric Career Hub

Microsoft Fabric Career Hub

Explore career paths and learn resources in Fabric.

Fabric Partner Community

Microsoft Fabric Partner Community

Engage with the Fabric engineering team, hear of product updates, business opportunities, and resources in the Fabric Partner Community.

Top Solution Authors