How to combine text and a field value in a single line of display

user_1754255 0
Viewed 384

I am using Vega and I am stuck on this simple issue. I want to display

The yield is 43.67%

However using the samples provided I have managed to just display the value 43.67

{
  mark:
    {
      type: "text",
      align: "center",
      fontSize: 40,
      fontWeight: "bold"
    },
  encoding: 
    {
      "text": {"field": "Yield", "type": "quantitative",format: ".2f"}
    }
}

Is it possible to add some text in front of this value and put a % sign after it?

vega vega-lite
1 Answers

THe best way to add this sort of complicated annotation is using a calculate transform; for example:

{
  mark:
    {
      type: "text",
      align: "center",
      fontSize: 40,
      fontWeight: "bold"
    },
  transform:
    [
      {"calculate": "'The yield is ' + datum.Yield + '%'", "as": "annotated_yield"}
    ],
  encoding: 
    {
      "text": {"field": "annotated_yield", "type": "nominal"}
    }
}
user_29378310
Related