Deneb Vega-Lite Visual - Add legend with tick definition

[DW868990]

Hi, 
I have a deneb Vega-Lite visual like below, and I need to add a legend that simply says the tick line is the previous value. 
Is this possible within the Vega-Lite.
Please find code below, any help appreciated. 
Thank you.

{
"data": {"name": "dataset"},
"height": {"step": 50},
"layer": [
{
"mark": {
"type": "bar",
"yOffset": 5,
"cornerRadiusEnd": 20,
"stroke": "#605e5c",
"strokeWidth": 0,
"height": {"band": 0.3}
},
"encoding": {
"y": {
"field": "Product",
"scale": {"padding": 0},
"sort": {
"op": "sum",
"field": "Latest Period",
"order": "descending"
},
"axis": {
"title": null,
"bandPosition": 0,
"grid": true,
"domain": false,
"ticks": false,
"labelAlign": "left",
"labelBaseline": "middle",
"labelPadding": -5,
"labelOffset": -15,
"labelLimit": 1000,
"titleX": 5,
"titleY": -5,
"titleAngle": 0,
"titleAlign": "left"
}
},
"color": {
"condition": {
"test": "datum['CF']",
"field": "CF",
"legend": null,
"scale": null
},
"value": "#b3b3b3"
},
"tooltip": [
{
"field": "Product",
"type": "ordinal"
},
{
"field": "Latest Period",
"type": "quantitative"
},
{
"field": "Previous Period",
"type": "quantitative"
}
],
"x": {
"field": "Latest Period",
"aggregate": "sum",
"title": null,
"axis": {
"grid": false,
"labelOpacity": 0
}
}
}
},
{
"mark": {
"type": "text",
"align": "left",
"baseline": "middle",
"dx": 5,
"dy": 5,
"fontWeight": "normal",
"fontsize": 14
},
"encoding": {
"y": {
"field": "Product",
"sort": {
"op": "sum",
"field": "Latest Period",
"order": "descending"
}
},
"x": {
"field": "Latest Period",
"aggregate": "sum"
},
"text": {
"field": "Latest Period"
}
}
},
{
"mark": {
"type": "tick",
"thickness": 2,
"opacity": 0.7,
"color": "#605E5C",
"align": "left",
"baseline": "middle",
"dx": 5,
"dy": 5,
"fontWeight": "normal",
"fontsize": 14
},
"encoding": {
"y": {
"field": "Product",
"sort": {
"op": "sum",
"field": "Latest Period",
"order": "descending"
}
},
"x": {
"field": "Previous Period",
"aggregate": "sum"
},
"text": {
"field": "Previous Period"
}
}
}
]
}

[giammariam]

Hey @DW868990 there are different ways that you could indicate what the tick represents, but if you are intent on showing the tick in the legend channel, you can do something like the following.

gist can be found here
spec:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"a": "A", "b": 28, "previous": 17},
      {"a": "B", "b": 55, "previous": 65},
      {"a": "C", "b": 43, "previous": 30},
      {"a": "D", "b": 91, "previous": 65},
      {"a": "E", "b": 81, "previous": 70}
    ]
  },
  "transform": [
    {"calculate": "datum['previous'] < datum['b']", "as": "increase"}
  ],
  "encoding": {
    "x": {"field": "b", "type": "quantitative"},
    "y": {"field": "a", "type": "nominal"}
  },
  "layer": [
    {
      "mark": {"type": "bar"},
      "encoding": {
        "color": {
          "condition": {
            "test": "datum['increase']",
            "value": "rgb(76, 120, 168)"
          },
          "value": "rgb(256, 0, 0)"
        }
      }
    },
    {
      "mark": {"type": "tick", "color": "#000"},
      "encoding": {
        "x": {
          "field": "previous", "type": "quantitative"
        },
        "color": {
          "field": "increase",
          "type": "nominal",
          "scale": {
            "domain": [true, false],
            "range": ["#000", "#000"]
          },
          "legend": {
            "title": null,
            "labelExpr": "'Previous Value'",
            "symbolType": "M0.5 -1.5 v2 1",
            "symbolStrokeWidth": 1.5,
            "symbolStrokeColor": "#000",
            "symbolOpacity": {"expr": "datum['value'] === true ? 1 : 0"},
            "labelOpacity": {"expr": "datum['value'] === true ? 1 : 0"}
          }
        }
      }
    }
  ]
}

If this is enough to get you going please consider liking this reply and choosing it as the solution. Otherwise, I'm happy to help further.

[DW868990]

Thank you. What other ways would you suggest?
Its just so the user can easily tell by the visual that the tick mark represents the previous value.
Also, in the above example can the legend sit at the top right of the visual?

[giammariam · Accepted solution]

You could show it outside of Deneb in Power BI with something like a text box. Inside of Deneb you could use the title/subtitle properties, or you could do this with vertical concatenation.

This method should work just fine though.

gist can be found here
spec:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"a": "A", "b": 28, "previous": 17},
      {"a": "B", "b": 55, "previous": 65},
      {"a": "C", "b": 43, "previous": 30},
      {"a": "D", "b": 91, "previous": 65},
      {"a": "E", "b": 81, "previous": 70}
    ]
  },
  "transform": [
    {"calculate": "datum['previous'] < datum['b']", "as": "increase"}
  ],
  "encoding": {
    "x": {"field": "b", "type": "quantitative"},
    "y": {"field": "a", "type": "nominal"}
  },
  "layer": [
    {
      "mark": {"type": "bar"},
      "encoding": {
        "color": {
          "condition": {
            "test": "datum['increase']",
            "value": "rgb(76, 120, 168)"
          },
          "value": "rgb(256, 0, 0)"
        }
      }
    },
    {
      "mark": {"type": "tick", "color": "#000"},
      "encoding": {
        "x": {
          "field": "previous", "type": "quantitative"
        },
        "color": {
          "field": "increase",
          "type": "nominal",
          "scale": {
            "domain": [true, false],
            "range": ["#000", "#000"]
          },
          "legend": {
            "title": null,
            "orient": "none",
            "legendY": -20,
            "legendX": {"expr": "width"},
            "labelAlign": "right",
            "labelExpr": "'Previous Value'",
            "symbolType": "M-12.5 -1.5 v2 1",
            "symbolStrokeWidth": 1.5,
            "symbolStrokeColor": "#000",
            "symbolOpacity": {"expr": "datum['value'] === true ? 1 : 0"},
            "labelOpacity": {"expr": "datum['value'] === true ? 1 : 0"}
          }
        }
      }
    }
  ]
}