I have the following chart which pulls data from a file. I then add a filter to the chart to determine which tickers to use and my legend updates accordingly, however, I'm wondering if I can somehow also have my tooltip automatically update, such that it displays the value of each line, without hardcoding?
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"params": [{"name": "dt", "expr": "hover['Date']"}],
"data": {"name": "dataset"},
"title": {
"text": {"expr": "data('dataset')[0]['title']"},
"anchor": "start",
"subtitle": {"expr": "data('dataset')[0]['title']"}
},
"encoding": {"x": {"field": "Date", "type": "temporal"}},
"layer": [
{
"layer": [
{
"mark": "line",
"encoding": {
"y": {"field": "Sum of Price", "type": "quantitative", "title": "Price"},
"color": {"field": "Ticker", "type": "nominal", "scale": {"range": {"field": "Colour"}}}
}
},
{
"params": [
{
"name": "hover",
"select": {
"type": "point",
"fields": ["Date"],
"nearest": true,
"on": "mouseover",
"clear": "mouseout"
}
}
],
"mark": {"type": "rule", "color": "gray", "y": 0, "y2": {"expr": "height"}},
"encoding": {
"opacity": {
"condition": {
"test": {"param": "hover", "empty": false},
"value": 0.5
},
"value": 0
},
"tooltip": [
{"field": "Date", "type": "temporal"},
{"field": "Sum of Price", "type": "quantitative"}
]
}
}
]
}
],
"config": {
"view": {"stroke": "transparent"},
"axis": {"domain": false, "tickColor": "lightGray"},
"style": {"cell": {"stroke": "transparent"}}
}
}
Thank you.
This is not easy to do but the following works:
Create a measure as follows and add it to the field well of deneb:
Prices =
VAR t = CALCULATETABLE( SUMMARIZE(combined,combined[Ticker], combined[Price]), ALLSELECTED(), VALUES(combined[Date]))
RETURN
IF(NOT(ISBLANK(SUM(combined[Price]))),
CONCATENATEX(t, combined[Ticker] & " : " & combined[Price], UNICHAR(10))
)
Here is the spec:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {"name": "dataset"},
"title": {
"text": {
"expr": "data('dataset')[0]['title']"
},
"anchor": "start",
"subtitle": {
"expr": "data('dataset')[0]['title']"
}
},
"encoding": {
"x": {
"field": "Date",
"type": "temporal"
}
},
"layer": [
{
"mark": {"type": "line"},
"encoding": {
"y": {
"field": "Sum of Price",
"type": "quantitative",
"title": "Price"
},
"color": {
"field": "Ticker",
"type": "nominal",
"scale": {
"range": {"field": "Colour"}
}
}
}
},
{
"params": [
{
"name": "hover",
"select": {
"type": "point",
"fields": ["Date"],
"nearest": true,
"on": "mouseover",
"clear": "mouseout"
}
}
],
"mark": {
"type": "rule",
"color": "gray",
"y": 0,
"y2": {"expr": "height"}
},
"encoding": {
"tooltip": [
{
"field": "Date",
"type": "temporal"
},
{
"field": "Prices",
"type": "nominal"
}
],
"opacity": {
"condition": {
"test": {
"param": "hover",
"empty": false
},
"value": 0.5
},
"value": 0
}
}
}
],
"config": {
"view": {"stroke": "transparent"},
"axis": {
"domain": false,
"tickColor": "lightGray"
},
"style": {
"cell": {"stroke": "transparent"}
}
}
}