How to get 'tooltip' information from two separate layers in Vega-Lite charts
Here is an example.
I have a Vega-Lite chart with two layers of data being rendered, and I would like to have both 'displayed' in the tooltip information.
I have tried adding 'tooltip' information to both datasets, but the tooltip layer only picks a single dataset.
I also tried just adding two tooltip layers, one for each dataset, but that failed spectacularly. :)
And I tried 'adding' the tooltip information from one dataset to the other, which also did not work.
Here is a solution based on your provided example that works for a combined dataset. This solution is based on the "Multi Series Line Chart with Tooltip" from the Online Editor (link).
For the combined dataset, there is a new attribute that denotes which line the data corresponds to (e.g., {"value": 12, "date": "2022-01-10T14:00:00.000Z", "line": "Holy Handgrenades"}; this new attribute is then used as part of the tooltip specification in the new layer (e.g., "tooltip": [{"field": "Holy Handgrenades", "type": "quantitative"}, ...] in combination with the layer transform that ensures that the data is in the right format: "transform": [{"pivot": "line", "value": "value", "groupby": ["date"]}]. The resulting tooltip would look like this:
Note also that with the combined dataset, it is possible to draw the two lines in the same layer as in this version of the provided example.
UPDATE - Removing missing values from the tooltip
In the comments below, @GregBartlett asked about updating the tooltip to remove missing values rather than showing a zero. There are two options for how to approach this: (1) impute NaN rather than zero or (2) create a custom tooltip (with less styling).
(1) Impute NaN rather than zero
The impute transform (link) allows you to add new data entries that are otherwise missing from the dataset. In this case, we could use the line {"impute": "value", "key": "date", "value": "N/A", "groupby": ["line"]}, before the pivot transform in the example above. Here is a link to this solution in the Online editor. As the data now includes an "N/A" string value, the tooltip would now look like this:
(2) Create a custom tooltip with less styling
In order to have a version that simply does not include the values when they are missing, one approach is to use a calculate transform (link) to create a custom field using an if expression (link) to determine the condition: "transform": [{"calculate": "datum['Holy Handgrenades'] > 0 ? (datum['Vorpol Rabbits'] > 0 ? 'Holy Handgrenades:' + datum['Holy Handgrenades'] + ', Vorpol Rabbits:' + datum['Vorpol Rabbits'] : 'Holy Handgrenades:' + datum['Holy Handgrenades']) : 'Vorpol Rabbits:' + datum['Vorpol Rabbits']", "as": "tooltip"}],. Here is a link to this solution in the Online editor. The resulting tooltip would look like this:
