How do you change the font formatting of a single axis label value

Question

I have a text field ['Region'] with four values {Global, AMER, APAC, EMEA}. I have a simple bar chart and want the label to be bold only for 'Global' but have been unable to do so.

I tried:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {    "values": [
      {"Region": "Global", "Months": 1, "RegionRank":1},
      {"Region": "AMER", "Months": -1, "RegionRank":2},
      {"Region": "APAC", "Months": 3, "RegionRank":3},    {"Region": "EMEA", "Months": 2, "RegionRank":4}

    ]},
  "layer": [
    {
      "mark": {
        "type": "bar",
        "filled": false,
        "stroke": "gray",
        "strokeDash": [3.6],
        "strokeWidth": 3
      }
    },
    {
      "mark": {
        "type": "text",
          "fontSize": 14,
        "xOffset": {
          "expr": "datum['Months']<0 ? -15:15"
        }
      },
      "encoding": {
        "text": {
          "field": "Months",
          "format": "+.0f"
        }
      }
    }
  ],
  "encoding": {
    "y": {
      "field": "Region",
      "type": "nominal",
      "axis": {
        "offset": 10,
        "title": null,
// problem section
       "labelFontWeight": {
         "condition": {"test": "datum['Region'] == 'Global'","value":"bold"},
            "value":"normal"
       }
      },
      "sort": {
        "op": "min",
        "field": "RegionRank",
        "order": "ascending"
      }
    },
    "x": {
      "field": "Months",
      "type": "quantitative",
      "axis": {"title": null}
    }
  }
}

but there is no change to the label font weight.

What is interesting is that I switched the result conditions, making the '==Global' result "normal" and the else "bold" and it changed font weight on all the labels to bold. That leads me to believe that my condition is never being evaluated as true. Any ideas why? Is what I want to do - changing a signal value in an axis label - possible?

Please post a full working spec that works in the Vega online editor or a link to a sample .pbix. — Davide Bacci, Feb 07 '23 at 19:19

score 0 · Accepted Answer · answered Feb 07 '23 at 20:25

You mean like this?

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"Region": "Global", "Months": 1, "RegionRank": 1},
      {"Region": "AMER", "Months": -1, "RegionRank": 2},
      {"Region": "APAC", "Months": 3, "RegionRank": 3},
      {"Region": "EMEA", "Months": 2, "RegionRank": 4}
    ]
  },
  "layer": [
    {
      "mark": {
        "type": "bar",
        "filled": false,
        "stroke": "gray",
        "strokeDash": [3.6],
        "strokeWidth": 3
      }
    },
    {
      "mark": {
        "type": "text",
        "fontSize": 14,
        "xOffset": {"expr": "datum['Months']<0 ? -15:15"}
      },
      "encoding": {"text": {"field": "Months", "format": "+.0f"}}
    }
  ],
  "encoding": {
    "y": {
      "field": "Region",
      "type": "nominal",
      "axis": {
        "offset": 10,
        "title": null,
        "labelFontWeight": {
          "condition": {"test": "datum.label == 'Global'", "value": "bold"},
          "value": "normal"
        }
      },
      "sort": {"op": "min", "field": "RegionRank", "order": "ascending"}
    },
    "x": {"field": "Months", "type": "quantitative", "axis": {"title": null}}
  }
}

Perfect! Looks like you changed 'datum.['Region']' to 'datum.label'. I used the structure I did because it worked in my xOffset condition above. Any chance you can explain the difference? Either way thanks for the solution. — tnelson98, Feb 07 '23 at 23:09

How do you change the font formatting of a single axis label value

1 Answers1