title: tooltips on grouped bar charts in vega (using group marks)
body: <p>I'm using vega to create a grouped bar chart and I would want to make some numbers (in my label data field) appear when I hover my mouse over one bar or a subgroup of bars. The json object below seems to work, but it shows all the number of all the bars when I move over a part of the graph.</p>
  
  <pre><code>{
    "scales": [
      {
        "padding": 0.2, 
        "range": "height", 
        "type": "ordinal", 
        "domain": {
          "field": "category", 
          "data": "table"
        }, 
        "name": "cat"
      }, 
      {
        "domain": {
          "field": "value", 
          "data": "table"
        }, 
        "name": "val", 
        "range": "width", 
        "type": "linear", 
        "round": "true", 
        "nice": "true"
      }, 
      {
        "range": "category20", 
        "type": "ordinal", 
        "domain": {
          "field": "position", 
          "data": "table"
        }, 
        "name": "color"
      }
    ], 
    "axes": [
      {
        "tickSize": 0, 
        "scale": "cat", 
        "type": "y", 
        "tickPadding": 8
      }, 
      {
        "scale": "val", 
        "type": "x"
      }
    ], 
    "signals": [
      {
        "name": "tooltip",
        "init": {},
        "streams": [
          {"type": "rect:mouseover", "expr": "datum"},
          {"type": "rect:mouseout", "expr": "{}"}
        ]
      }
    ],
    "predicates": [
      {
        "name": "tooltip", "type": "==", 
        "operands": [{"signal": "tooltip._id"}, {"arg": "id"}]
      }
    ],  
    "height": 800, 
    "width": 600, 
    "marks": [
      {
        "from": {
          "data": "table", 
          "transform": [
            {
              "type": "facet", 
              "groupby": [
                "category"
              ]
            }
          ]
        }, 
        "marks": [
          {
            "type": "rect", 
            "name": "bars", 
            "properties": {
              "enter": {
                "y": {
                  "field": "position", 
                  "scale": "pos"
                }, 
                "x": {
                  "field": "value", 
                  "scale": "val"
                }, 
                "x2": {
                  "scale": "val", 
                  "value": 0
                }, 
                "fill": {
                  "field": "position", 
                  "scale": "color"
                }, 
                "height": {
                  "band": "true", 
                  "scale": "pos"
                }
              }
            }
          }, 
          {
            "from": {
              "mark": "bars"
            }, 
            "type": "text", 
            "properties": {
              "enter": {
                "align": {"value": "center"},
                "fill": {"value": "#333"}
              },
              "update": {
                "x": { "field": "x2"},
                "dy": {"field":"height", "mult": 0.5},
                "y": {"field":"y"},
                "text": {"field": "datum.label"},
                "align": {"value":"center"},
                "baseline":{"value":"middle"},
                "fillOpacity": {
                  "rule": [
                    {
                      "predicate": {"name": "tooltip", "id": {"value": null}},
                      "value": 0
                    },
                    {"value": 1}
                  ]
                }
              }
            }
          }
        ], 
        "type": "group", 
        "properties": {
          "enter": {
            "y": {
              "field": "key", 
              "scale": "cat"
            }, 
            "height": {
              "band": "true", 
              "scale": "cat"
            }
          }
        }, 
        "scales": [
          {
            "range": "height", 
            "type": "ordinal", 
            "name": "pos", 
            "domain": {
              "field": "position"
            }
          }
        ]
      }
    ], 
    "data": [
      {
        "values": [
          {
            "category": "A", 
            "position": 1, 
            "value": 1661.0, 
            "label": 40.0
          }, 
          {
            "category": "A", 
            "position": 2, 
            "value": 2928.0, 
            "label": 35.0
          }, 
          {
            "category": "A", 
            "position": 3, 
            "value": 9010.0, 
            "label": 69.0
          }, 
          {
            "category": "A", 
            "position": 4, 
            "value": 6459.0, 
            "label": 97.0
          }, 
          {
            "category": "B", 
            "position": 1, 
            "value": 1022.0, 
            "label": 39.0
          }, 
          {
            "category": "B", 
            "position": 2, 
            "value": 1185.0, 
            "label": 33.0
          }, 
          {
            "category": "B", 
            "position": 3, 
            "value": 567.0, 
            "label": 60.0
          }, 
          {
            "category": "B", 
            "position": 4, 
            "value": 759.0, 
            "label": 84.0
          }
        ], 
        "name": "table"
      }
    ]
  } 
  </code></pre>
  
  <p>I also tried to use signals in the mark block as shown below, but this doens't give me the desired result (all numbers are shown stacked on top of each other, unreadable).</p>
  
  <pre><code>  {
        "from": {
          "mark": "bars"
        }, 
        "type": "text", 
        "properties": {
          "enter": {
            "align": {"value": "center"},
            "fill": {"value": "#333"}
          },
          "update": {
            "x": { "signal": "tooltip.x2"},
            "dy": {"field":"height", "mult": 0.5},
            "y": {"signal":"tooltip.y"},
            "text": {"field": "datum.label"},
            "align": {"value":"center"},
            "baseline":{"value":"middle"},
            "fillOpacity": {
              "rule": [
                {
                  "predicate": {"name": "tooltip", "id": {"value": null}},
                  "value": 0
                },
                {"value": 1}
              ]
            }
          }
        }
      }
  </code></pre>
  
  <p>Can anyone help out how to get the desired result and to understand how the data is passed of a (sub)mark to that signal?</p>