powerbipowerbi-desktopvega-litevegadeneb

Deneb click on axis label to cross filter


With a stacked bar chart made with Deneb, if I click on a bar segment it cross filters on that segment. Is it possible to click on the label for the bar to filter on the entire bar?

In this example, clicking on the category (bar segment) works, however I want to click on the axis labels ('top', 'bottom') and have the entire bar filtered, similar to what happens in a stacked bar in the built in power bi stacked bar visual.

enter image description here

{
"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

  • Here you go.

    {
      "$schema": "https://vega.github.io/schema/vega/v5.json",
      "background": "white",
      "padding": 5,
      "width": 200,
      "style": "cell",
      "data": [
        {"name": "dataset"},
        {
          "name": "data_0",
          "source": "dataset",
          "transform": [
            {
              "type": "aggregate",
              "groupby": [
                "yval",
                "category"
              ],
              "ops": ["sum"],
              "fields": ["xval"],
              "as": ["sum_xval"]
            },
            {
              "type": "stack",
              "groupby": ["yval"],
              "field": "sum_xval",
              "sort": {
                "field": ["category"],
                "order": ["ascending"]
              },
              "as": [
                "sum_xval_start",
                "sum_xval_end"
              ],
              "offset": "zero"
            }
          ]
        },
        {
          "name": "data_1",
          "source": "dataset",
          "transform": [
            {
              "type": "aggregate",
              "groupby": ["yval"],
              "ops": ["sum"],
              "fields": ["xval"],
              "as": ["sum_xval"]
            }
          ]
        }
      ],
      "signals": [
        {"name": "y_step", "value": 20},
        {
          "name": "height",
          "update": "bandspace(domain('y').length, 0.1, 0.05) * y_step"
        }
      ],
      "marks": [
        {
          "name": "layer_0_marks",
          "type": "rect",
          "style": ["bar"],
          "from": {"data": "data_0"},
          "encode": {
            "update": {
              "tooltip": {
                "signal": "{\"Sum of xval\": format(datum[\"sum_xval\"], \"\"), \"yval\": isValid(datum[\"yval\"]) ? datum[\"yval\"] : \"\"+datum[\"yval\"], \"category\": isValid(datum[\"category\"]) ? datum[\"category\"] : \"\"+datum[\"category\"]}"
              },
              "fill": {
                "scale": "color",
                "field": "category"
              },
              "ariaRoleDescription": {
                "value": "bar"
              },
              "description": {
                "signal": "\"Sum of xval: \" + (format(datum[\"sum_xval\"], \"\")) + \"; yval: \" + (isValid(datum[\"yval\"]) ? datum[\"yval\"] : \"\"+datum[\"yval\"]) + \"; category: \" + (isValid(datum[\"category\"]) ? datum[\"category\"] : \"\"+datum[\"category\"])"
              },
              "x": {
                "scale": "x",
                "field": "sum_xval_end"
              },
              "x2": {
                "scale": "x",
                "field": "sum_xval_start"
              },
              "y": {
                "scale": "y",
                "field": "yval"
              },
              "height": {
                "signal": "max(0.25, bandwidth('y'))"
              }
            }
          }
        },
        {
          "name": "axisClick",
          "type": "rect",
          "from": {"data": "data_1"},
          "encode": {
            "update": {
              "fill": {"value": "transparent"},
              "x": {"value": -40},
              "x2": {"value": 0},
              "y": {
                "scale": "y",
                "field": "yval"
              },
              "height": {
                "signal": "max(0.25, bandwidth('y'))"
              }
            }
          }
        }
      ],
      "scales": [
        {
          "name": "x",
          "type": "linear",
          "domain": {
            "data": "data_0",
            "fields": [
              "sum_xval_start",
              "sum_xval_end"
            ]
          },
          "range": [0, {"signal": "width"}],
          "nice": true,
          "zero": true
        },
        {
          "name": "y",
          "type": "band",
          "domain": {
            "data": "dataset",
            "field": "yval",
            "sort": {
              "order": "descending",
              "field": "key"
            }
          },
          "range": {
            "step": {"signal": "y_step"}
          },
          "paddingInner": 0.1,
          "paddingOuter": 0.05
        },
        {
          "name": "color",
          "type": "ordinal",
          "domain": {
            "data": "data_0",
            "field": "category",
            "sort": true
          },
          "range": "category"
        }
      ],
      "axes": [
        {
          "scale": "x",
          "orient": "bottom",
          "grid": false,
          "labelFlush": true,
          "labelOverlap": true,
          "tickCount": {
            "signal": "ceil(width/40)"
          },
          "zindex": 0
        },
        {
          "scale": "y",
          "orient": "left",
          "grid": false,
          "zindex": 0
        }
      ],
      "legends": [
        {
          "fill": "color",
          "symbolType": "square",
          "title": "category"
        }
      ]
    }