Vega custom tooltip data visualisation - visualization

Question

Could anyone help be to develop a tooltip at line chart that looks like this?
Here is my spec at Vega Lite Editor.

Answer 1

Tooltips work on key:value pairs. If you amend your input data to an object of key value pairs and create a flatten transform, you can achieve your desired behaviour. I have changed all the tooltips below to be identical for speed but you should see the pattern.
{
"description": "Total Count line chart.",
"width": 1200,
"height": 450,
"padding": 5,
"signals": [{"name": "interpolate", "value": "linear"}],
"legends": [
{
"fill": "color",
"orient": "bottom",
"direction": "horizontal",
"symbolType": "square"
}
],
"data": [
{
"name": "table",
"values": [
{
"x": 0,
"y": 30,
"c": "Passenger Vessel",
"tooltip": [
{
"title": "My Title",
"Tall Ship": 0,
"Sailing Yacht": 10,
"Super Yacht": 20,
"Motor Yacht": 10,
"Rib": 0
}
]
},
{
"x": 1,
"y": 20,
"c": "Passenger Vessel",
"tooltip": [
{
"title": "My Title",
"Tall Ship": 0,
"Sailing Yacht": 10,
"Super Yacht": 20,
"Motor Yacht": 10,
"Rib": 0
}
]
},
{
"x": 2,
"y": 90,
"c": "Passenger Vessel",
"tooltip": [
{
"Tall Ship": 0,
"Sailing Yacht": 10,
"Super Yacht": 20,
"Motor Yacht": 10,
"Rib": 0
}
]
},
{
"x": 3,
"y": 60,
"c": "Passenger Vessel",
"tooltip": [
{
"title": "My Title",
"Tall Ship": 0,
"Sailing Yacht": 10,
"Super Yacht": 20,
"Motor Yacht": 10,
"Rib": 0
}
]
},
{
"x": 4,
"y": 50,
"c": "Passenger Vessel",
"tooltip": [
{
"title": "My Title",
"Tall Ship": 0,
"Sailing Yacht": 10,
"Super Yacht": 20,
"Motor Yacht": 10,
"Rib": 0
}
]
},
{
"x": 5,
"y": 40,
"c": "Passenger Vessel",
"tooltip": [
{
"title": "My Title",
"Tall Ship": 0,
"Sailing Yacht": 10,
"Super Yacht": 20,
"Motor Yacht": 10,
"Rib": 0
}
]
},
{
"x": 6,
"y": 10,
"c": "Passenger Vessel",
"tooltip": [
{
"title": "My Title",
"Tall Ship": 0,
"Sailing Yacht": 10,
"Super Yacht": 20,
"Motor Yacht": 10,
"Rib": 0
}
]
},
{
"x": 0,
"y": 50,
"c": "Pleasure Craft",
"tooltip": [
{
"title": "My Title",
"Tall Ship": 0,
"Sailing Yacht": 10,
"Super Yacht": 20,
"Motor Yacht": 10,
"Rib": 0
}
]
},
{
"x": 1,
"y": 10,
"c": "Pleasure Craft",
"tooltip": [
{
"title": "My Title",
"Tall Ship": 0,
"Sailing Yacht": 10,
"Super Yacht": 20,
"Motor Yacht": 10,
"Rib": 0
}
]
},
{
"x": 2,
"y": 50,
"c": "Pleasure Craft",
"tooltip": [
{
"Tall Ship": 0,
"Sailing Yacht": 10,
"Super Yacht": 20,
"Motor Yacht": 10,
"Rib": 0
}
]
},
{
"x": 3,
"y": 40,
"c": "Pleasure Craft",
"tooltip": [
{
"title": "My Title",
"Tall Ship": 0,
"Sailing Yacht": 10,
"Super Yacht": 20,
"Motor Yacht": 10,
"Rib": 0
}
]
},
{
"x": 4,
"y": 110,
"c": "Pleasure Craft",
"tooltip": [
{
"title": "My Title",
"Tall Ship": 0,
"Sailing Yacht": 10,
"Super Yacht": 20,
"Motor Yacht": 10,
"Rib": 0
}
]
},
{
"x": 5,
"y": 40,
"c": "Pleasure Craft",
"tooltip": [
{
"title": "My Title",
"Tall Ship": 0,
"Sailing Yacht": 10,
"Super Yacht": 20,
"Motor Yacht": 10,
"Rib": 0
}
]
},
{
"x": 6,
"y": 20,
"c": "Pleasure Craft",
"tooltip": [
{
"title": "My Title",
"Tall Ship": 0,
"Sailing Yacht": 10,
"Super Yacht": 20,
"Motor Yacht": 10,
"Rib": 0
}
]
},
{"x": 0, "y": 50, "c": "Unknown", "tooltip": [{}]},
{"x": 1, "y": 60, "c": "Unknown", "tooltip": [{}]},
{"x": 2, "y": 90, "c": "Unknown", "tooltip": [{}]},
{"x": 3, "y": 40, "c": "Unknown", "tooltip": [{}]},
{"x": 4, "y": 50, "c": "Unknown", "tooltip": [{}]},
{"x": 5, "y": 20, "c": "Unknown", "tooltip": [{}]},
{"x": 6, "y": 40, "c": "Unknown", "tooltip": [{}]}
],
"transform": [{"type": "flatten", "fields": ["tooltip"]}]
}
],
"scales": [
{
"name": "x",
"type": "point",
"range": "width",
"domain": {"data": "table", "field": "x"}
},
{
"name": "y",
"type": "linear",
"range": "height",
"nice": true,
"zero": true,
"domain": {"data": "table", "field": "y"}
},
{
"name": "color",
"type": "ordinal",
"range": ["#BA20CE", "#60cf85", "#cd2c4f"],
"domain": {"data": "table", "field": "c"}
}
],
"axes": [
{"orient": "bottom", "scale": "x"},
{"orient": "left", "scale": "y"}
],
"config": {
"style": {
"guide-label": {"fontSize": 14, "fill": "#cccccc", "fontWeight": 800}
},
"axis": {"grid": true, "gridColor": "#333333"}
},
"marks": [
{
"type": "group",
"from": {"facet": {"name": "series", "data": "table", "groupby": "c"}},
"marks": [
{
"type": "line",
"from": {"data": "series"},
"encode": {
"enter": {
"x": {"scale": "x", "field": "x"},
"y": {"scale": "y", "field": "y"},
"stroke": {"scale": "color", "field": "c"},
"strokeWidth": {"value": 2}
},
"update": {
"interpolate": {"signal": "interpolate"},
"strokeOpacity": {"value": 1}
},
"hover": {"strokeOpacity": {"value": 0.5}}
}
},
{
"type": "symbol",
"from": {"data": "series"},
"encode": {
"update": {
"x": {"scale": "x", "field": "x"},
"y": {"scale": "y", "field": "y"},
"fillOpacity": {"value": 0}
},
"hover": {
"fillOpacity": {"value": 1},
"fill": {"scale": "color", "field": "c"},
"cursor": {"value": "pointer"},
"tooltip": {"signal": "datum['tooltip'] "}
}
}
}
]
}
]
}