Tooltip in Vega

Here I wanted to show distinct 'd' field values for each 'a' field in tooltip. For text it's giving correct but A and B are overlapping and in tooltip it's giving only B.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple bar chart with embedded data with tooltip.",
  "width":500,
  "height":300,
  "data": {
    "values": [
      {"a": "A", "b": 28,"d": "A"},
      {"a": "A", "b": 55,"d": "A"},
      {"a": "A", "b": 43,"d": "B"},
      {"a": "A", "b": 91,"d": "B"},
      {"a": "B", "b": 81,"d": "A"},
      {"a": "B", "b": 53,"d": "A"},
      {"a": "G", "b": 19,"d": "B"},
      {"a": "H", "b": 87,"d": "A"},
      {"a": "I", "b": 52,"d": "B"}
    ]
  },
   "encoding": {
    "x": {"field": "a", "type": "nominal"}
  },
  "layer":[

{
     "encoding": {
       "y": {"aggregate":"distinct", "field": "d",
          "scale": {"domain": [0, 10]},
          "type": "quantitative", 
          "title": "Open Rate (%)",
          "axis": {"titleColor":"#54b399"}
        }
      },
  "layer":[{
    "mark": {"stroke": "#54b399", "type": "line", "interpolate": "monotone", "point": true}
 
    },
     {
    "mark": {
      "type": "text",
      "align": "left",
      "baseline": "middle",
     "fontSize": 24,
      "dx": 3,
      "dy": -13
    },
    "encoding": {
      "text": {"field": "d"},
    "tooltip": {"field": "d"}

    }
  }
    ]
    } ],
  "resolve": {"scale": {"y": "independent"}} 

}

image

can I know how to get both A and B values in tooltip ?

You need to apply your distinct aggregation inside a transform function before the encoding. What your spec shows is that you are only getting distinct data for the first layer, and the second layer is getting all the data.

Hi @wylie

I added transform before encoding, when I added the field d in tooltip it's giving undefined.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple bar chart with embedded data with tooltip.",
  "width":500,
  "height":300,
  "data": {
    "values": [
      {"a": "A", "b": 28,"d": "A"},
      {"a": "A", "b": 55,"d": "A"},
      {"a": "A", "b": 43,"d": "B"},
      {"a": "A", "b": 91,"d": "B"},
      {"a": "B", "b": 81,"d": "A"},
      {"a": "B", "b": 53,"d": "A"},
      {"a": "G", "b": 19,"d": "B"},
      {"a": "H", "b": 87,"d": "A"},
      {"a": "I", "b": 52,"d": "B"}
    ]
  },
  "transform":[    
  {
        "aggregate": [
        {"op": "distinct", "field": "d","as": "a_count"}
        ],
        "groupby": ["a"]
      }
      ],
     "encoding": {
     "x": {"field": "a", "type": "nominal"},
       "y": {"field": "a_count",
          "scale": {"domain": [0, 10]},
          "type": "quantitative", 
          "title": "Open Rate (%)",
          "axis": {"titleColor":"#54b399"}
        },
          
      },
  "layer":[{
    "mark": {"stroke": "#54b399", "type": "line", "interpolate": "monotone", "point": true}
 
    },
     {
    "mark": {
      "type": "text",
      "align": "left",
      "baseline": "middle",
     "fontSize": 24,
      "dx": 3,
      "dy": -13
    },
    "encoding": {
      "text": {"field": "d"},
      "tooltip":{"field":"d"}
    

    }
  }
    ]

}

I would be able to help more if this was related to an Elasticsearch query, but I think the problem is the sample data you're using.

Hi @wylie

I am not sure if there is any problem with sample data, I was getting result as undefined with the main data I was using.

Are you building a Vega spec based on Elasticsearch data? If so, can you please share the raw spec and the spec with data? Vega | Kibana Guide [7.11] | Elastic