powerbivega-litedeneb

Vega-lite assigning parameter to axis labels

In Vega-lite it is possible to assign a parameter to the legend (see example video here). Is it also possible to assign parameters to the axis labels? I know this is possible in Vega with signals from a previous question.

Below is the example, here can we assign a parameter to the 'top' and 'bottom' labels such that when they are clicked, the stacked bar to the right of the label is selected?

vega-lite example

{
"data": {
    "values": [
      {"category": "a", "xval": 1, "yval": "top"},
      {"category": "b", "xval": 5, "yval": "top"},
      {"category": "c", "xval": 8, "yval": "top"},
      {"category": "a", "xval": 3, "yval": "bottom"},
      {"category": "b", "xval": 1, "yval": "bottom"},
      {"category": "c", "xval": 9, "yval": "bottom"}
    ]
  },
  "encoding": {
    "y": {
      "title": null,
      "field": "yval",
      "sort": "descending"
    }
  },
  "layer": [
    {
      "mark": {
        "type": "bar",
        "tooltip": true
      },
      "encoding": {
        "x": {
          "title": null,
          "field": "xval",
          "type": "quantitative",
          "aggregate": "sum"
        },
        "color": {"field": "category"},
        "order": {"field": "category"}
      }
    }
  ]
}
Solution

  • You could make a separate chart spec for the y axis labels and do a hconcat like this. Definitely not ideal but it works.

    {
  "data": {
    "values": [
      {"category": "a", "xval": 1, "yval": "top"},
      {"category": "b", "xval": 5, "yval": "top"},
      {"category": "c", "xval": 8, "yval": "top"},
      {"category": "a", "xval": 3, "yval": "bottom"},
      {"category": "b", "xval": 1, "yval": "bottom"},
      {"category": "c", "xval": 9, "yval": "bottom"}
    ]
  },
  "params": [
    {"name": "yval_click", "select": {"type": "point", "encodings": ["y"]}}
  ],
  "spacing": 3,
  "hconcat": [
    {
      "width": 40,
      "mark": {"type": "bar", "tooltip": true},
      "encoding": {
        "y": {
          "title": null,
          "field": "yval",
          "sort": "descending",
          "axis": {
            "domain": false,
            "ticks": false,
            "labelAlign": "right",
            "labelPadding": -40
          }
        },
        "color": {
          "condition": {"param": "yval_click", "value": "transparent"},
          "value": "white"
        },
        "opacity": {
          "condition": {"param": "yval_click", "value": 1},
          "value": 0.2
        },
        "order": {"field": "category"}
      }
    },
    {
      "mark": {"type": "bar", "tooltip": true},
      "encoding": {
        "y": {
          "title": null,
          "field": "yval",
          "sort": "descending",
          "axis": {"labels": false}
        },
        "x": {
          "title": null,
          "field": "xval",
          "type": "quantitative",
          "aggregate": "sum"
        },
        "color": {"field": "category"},
        "opacity": {
          "condition": {"param": "yval_click", "value": 1},
          "value": 0.2
        },
        "order": {"field": "category"}
      }
    }
  ],
  "config": {"view": {"stroke": null}}
}