I'm trying to add an additional value (in this case z) to the tooltip. How can I achieve this with the following schema I have so far? I know it should be along the lines of adding additional objects to the tooltip array (one for last month and one for this month), but I'm unsure on how to map the values correctly. I can't seem to figure it out from the documentations and not seeing any examples of this. Any help would be appreciated. Thanks.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": "container",
"height": 300,
"data": {
"name": "table",
"values": [
{
"x": "Sun - 1",
"y": -0.01,
"c": "This Month (02/26/23 - 03/07/23)",
"z": "01/01/23"
},
{
"x": "Sun - 1",
"y": -0.01,
"c": "Last Month (01/01/23 - 02/04/23)",
"z": "03/01/23"
},
{
"x": "Mon - 1",
"y": 0.18,
"c": "This Month (02/26/23 - 03/07/23)",
"z": "01/01/23"
},
{
"x": "Mon - 1",
"y": 0.7,
"c": "Last Month (01/01/23 - 02/04/23)",
"z": "03/01/23"
},
{
"x": "Tue - 1",
"y": 0.23,
"c": "This Month (02/26/23 - 03/07/23)",
"z": "01/01/23"
},
{
"x": "Tue - 1",
"y": 0.45,
"c": "Last Month (01/01/23 - 02/04/23)",
"z": "03/01/23"
},
{
"x": "Wed - 1",
"y": 0.21,
"c": "This Month (02/26/23 - 03/07/23)",
"z": "01/01/23"
},
{
"x": "Wed - 1",
"y": 0.11,
"c": "Last Month (01/01/23 - 02/04/23)",
"z": "03/01/23"
},
{
"x": "Thu - 1",
"y": 0.79,
"c": "This Month (02/26/23 - 03/07/23)",
"z": "01/01/23"
},
{
"x": "Thu - 1",
"y": 0.35,
"c": "Last Month (01/01/23 - 02/04/23)",
"z": "03/01/23"
},
{
"x": "Fri - 1",
"y": 0.82,
"c": "This Month (02/26/23 - 03/07/23)",
"z": "01/01/23"
},
{
"x": "Fri - 1",
"y": 0.28,
"c": "Last Month (01/01/23 - 02/04/23)",
"z": "03/01/23"
},
{
"x": "Sat - 1",
"y": 0,
"c": "This Month (02/26/23 - 03/07/23)",
"z": "01/01/23"
},
{
"x": "Sat - 1",
"y": -0.01,
"c": "Last Month (01/01/23 - 02/04/23)",
"z": "03/01/23"
},
{
"x": "Sun - 2",
"y": 0,
"c": "This Month (02/26/23 - 03/07/23)",
"z": "01/01/23"
},
{
"x": "Sun - 2",
"y": -0.01,
"c": "Last Month (01/01/23 - 02/04/23)",
"z": "03/01/23"
},
{
"x": "Mon - 2",
"y": 0.21,
"c": "This Month (02/26/23 - 03/07/23)",
"z": "01/01/23"
},
{
"x": "Mon - 2",
"y": 0.11,
"c": "Last Month (01/01/23 - 02/04/23)",
"z": "03/01/23"
},
{
"x": "Tue - 2",
"y": 0.18,
"c": "This Month (02/26/23 - 03/07/23)",
"z": "01/01/23"
},
{
"x": "Tue - 2",
"y": 0.7,
"c": "Last Month (01/01/23 - 02/04/23)",
"z": "03/01/23"
},
{
"x": "Wed - 2",
"y": 0.1,
"c": "This Month (02/26/23 - 03/07/23)",
"z": "01/01/23"
},
{
"x": "Wed - 2",
"y": 0.5,
"c": "Last Month (01/01/23 - 02/04/23)",
"z": "03/01/23"
},
{
"x": "Thu - 2",
"y": 0.58,
"c": "This Month (02/26/23 - 03/07/23)",
"z": "01/01/23"
},
{
"x": "Thu - 2",
"y": 0.2,
"c": "Last Month (01/01/23 - 02/04/23)",
"z": "03/01/23"
},
{
"x": "Fri - 2",
"y": 0.23,
"c": "This Month (02/26/23 - 03/07/23)",
"z": "01/01/23"
},
{
"x": "Fri - 2",
"y": -0.01,
"c": "Last Month (01/01/23 - 02/04/23)",
"z": "03/01/23"
},
{
"x": "Sat - 2",
"y": -0.01,
"c": "This Month (02/26/23 - 03/07/23)",
"z": "01/01/23"
},
{
"x": "Sat - 2",
"y": -0.01,
"c": "Last Month (01/01/23 - 02/04/23)",
"z": "03/01/23"
},
{
"x": "Sun - 3",
"y": -0.01,
"c": "This Month (02/26/23 - 03/07/23)",
"z": "01/01/23"
},
{
"x": "Sun - 3",
"y": -0.01,
"c": "Last Month (01/01/23 - 02/04/23)",
"z": "03/01/23"
},
{
"x": "Mon - 3",
"y": 0.82,
"c": "This Month (02/26/23 - 03/07/23)",
"z": "01/01/23"
},
{
"x": "Mon - 3",
"y": -0.01,
"c": "Last Month (01/01/23 - 02/04/23)",
"z": "03/01/23"
},
{
"x": "Tue - 3",
"y": 0.82,
"c": "This Month (02/26/23 - 03/07/23)",
"z": "01/01/23"
},
{
"x": "Tue - 3",
"y": -0.01,
"c": "Last Month (01/01/23 - 02/04/23)",
"z": "03/01/23"
},
{
"x": "Wed - 3",
"y": 0.82,
"c": "This Month (02/26/23 - 03/07/23)",
"z": "01/01/23"
},
{
"x": "Wed - 3",
"y": -0.01,
"c": "Last Month (01/01/23 - 02/04/23)",
"z": "03/01/23"
},
{
"x": "Thu - 3",
"y": 0.21,
"c": "This Month (02/26/23 - 03/07/23)",
"z": "01/01/23"
},
{
"x": "Thu - 3",
"c": "Last Month (01/01/23 - 02/04/23)",
"z": "03/01/23",
"y": -0.01
},
{
"x": "Fri - 3",
"y": 0.18,
"c": "This Month (02/26/23 - 03/07/23)",
"z": "01/01/23"
},
{
"x": "Fri - 3",
"c": "Last Month (01/01/23 - 02/04/23)",
"z": "03/01/23",
"y": -0.01
},
{
"x": "Sat - 3",
"y": -0.01,
"c": "This Month (02/26/23 - 03/07/23)",
"z": "01/01/23"
},
{
"x": "Sat - 3",
"c": "Last Month (01/01/23 - 02/04/23)",
"z": "03/01/23",
"y": -0.01
},
{
"x": "Sun - 4",
"y": -0.01,
"c": "This Month (02/26/23 - 03/07/23)",
"z": "01/01/23"
},
{
"x": "Sun - 4",
"c": "Last Month (01/01/23 - 02/04/23)",
"z": "03/01/23",
"y": -0.01
},
{
"x": "Mon - 4",
"y": 0.23,
"c": "This Month (02/26/23 - 03/07/23)",
"z": "01/01/23"
},
{
"x": "Mon - 4",
"c": "Last Month (01/01/23 - 02/04/23)",
"z": "03/01/23",
"y": -0.01
},
{
"x": "Tue - 4",
"y": 0.21,
"c": "This Month (02/26/23 - 03/07/23)",
"z": "01/01/23"
},
{
"x": "Tue - 4",
"c": "Last Month (01/01/23 - 02/04/23)",
"z": "03/01/23",
"y": -0.01
},
{
"x": "Wed - 4",
"y": 0.79,
"c": "This Month (02/26/23 - 03/07/23)",
"z": "01/01/23"
},
{
"x": "Wed - 4",
"c": "Last Month (01/01/23 - 02/04/23)",
"z": "03/01/23",
"y": -0.01
},
{
"x": "Thu - 4",
"y": 0.82,
"c": "This Month (02/26/23 - 03/07/23)",
"z": "01/01/23"
},
{
"x": "Thu - 4",
"c": "Last Month (01/01/23 - 02/04/23)",
"z": "03/01/23",
"y": -0.01
},
{
"x": "Fri - 4",
"y": 0.82,
"c": "This Month (02/26/23 - 03/07/23)",
"z": "01/01/23"
},
{
"x": "Fri - 4",
"c": "Last Month (01/01/23 - 02/04/23)",
"z": "03/01/23",
"y": -0.01
},
{
"x": "Sat - 4",
"y": -0.01,
"c": "This Month (02/26/23 - 03/07/23)",
"z": "01/01/23"
},
{
"x": "Sat - 4",
"c": "Last Month (01/01/23 - 02/04/23)",
"z": "03/01/23",
"y": -0.01
},
{
"x": "Sun - 5",
"y": -0.01,
"c": "This Month (02/26/23 - 03/07/23)",
"z": "01/01/23"
},
{
"x": "Sun - 5",
"c": "Last Month (01/01/23 - 02/04/23)",
"z": "03/01/23",
"y": -0.01
},
{
"x": "Mon - 5",
"y": 0.18,
"c": "This Month (02/26/23 - 03/07/23)",
"z": "01/01/23"
},
{
"x": "Mon - 5",
"c": "Last Month (01/01/23 - 02/04/23)",
"z": "03/01/23",
"y": -0.01
},
{
"x": "Tue - 5",
"y": 0.18,
"c": "This Month (02/26/23 - 03/07/23)",
"z": "01/01/23"
},
{
"x": "Tue - 5",
"c": "Last Month (01/01/23 - 02/04/23)",
"z": "03/01/23",
"y": -0.01
},
{
"x": "Wed - 5",
"y": 0.18,
"c": "This Month (02/26/23 - 03/07/23)",
"z": "01/01/23"
},
{
"x": "Wed - 5",
"c": "Last Month (01/01/23 - 02/04/23)",
"z": "03/01/23",
"y": -0.01
},
{
"x": "Thu - 5",
"y": 0.18,
"c": "This Month (02/26/23 - 03/07/23)",
"z": "01/01/23"
},
{
"x": "Thu - 5",
"c": "Last Month (01/01/23 - 02/04/23)",
"z": "03/01/23",
"y": -0.01
},
{
"x": "Fri - 5",
"y": 0.18,
"c": "This Month (02/26/23 - 03/07/23)",
"z": "01/01/23"
},
{
"x": "Fri - 5",
"c": "Last Month (01/01/23 - 02/04/23)",
"z": "03/01/23",
"y": -0.01
},
{
"x": "Sat - 5",
"y": -0.01,
"c": "This Month (02/26/23 - 03/07/23)",
"z": "01/01/23"
},
{
"x": "Sat - 5",
"c": "Last Month (01/01/23 - 02/04/23)",
"y": -0.01
}
]
},
"encoding": {
"x": {
"field": "x",
"axis": {
"labelAngle": 270
},
"title": "",
"sort": null
},
"opacity": {
"value": 0.5
}
},
"layer": [
{
"encoding": {
"color": {
"field": "c",
"type": "nominal",
"title": "",
"scale": {
"range": [
"#CC3EBE",
"#5E5782"
]
},
"legend": {
"orient": "top-left"
},
"sort": {
"field": "x",
"order": "ascending"
}
},
"y": {
"field": "y",
"type": "quantitative",
"title": "",
"scale": {
"domain": [
0,
1
]
},
"axis": {
"format": ".0~%",
"values": [
0,
0.25,
0.5,
0.75,
1
]
},
"stack": null
},
"xOffset": {
"field": "c"
}
},
"layer": [
{
"mark": {
"type": "bar",
"width": {
"band": 1
},
"align": "center"
}
},
{
"transform": [
{
"filter": {
"param": "hover",
"empty": false
}
}
],
"mark": {
"type": "bar",
"width": {
"band": 1
},
"align": "center"
}
}
]
},
{
"transform": [
{
"calculate": "datum.y >= 0 ? datum.y : -1",
"as": "y"
},
{
"pivot": "c",
"value": "y",
"groupby": [
"x"
]
}
],
"mark": "rule",
"encoding": {
"opacity": {
"condition": {
"value": 0.3,
"param": "hover",
"empty": false
},
"value": 0
},
"tooltip": [
{
"field": "This Month (02/26/23 - 03/07/23)",
"type": "nominal",
"title": "This Month"
},
{
"field": "Last Month (01/01/23 - 02/04/23)",
"type": "nominal",
"title": "Last Month"
}
]
},
"params": [
{
"name": "hover",
"select": {
"type": "point",
"fields": [
"x"
],
"nearest": true,
"on": "mouseover",
"clear": "mouseout"
}
}
]
}
]
}
Link to the editor
I've tried various examples but just can't figure out how to add the z value to the tooltip.
Replace the second layer with the following code, now it works. Hope this helps you.
{
"transform": [
{"calculate": "datum.y >= 0 ? datum.y : -1", "as": "y"},
{"pivot": "c", "value": "z", "op": "values", "groupby": ["x"]},
{
"calculate": "datum['This Month (02/26/23 - 03/07/23)'][0].y",
"as": "This Month y"
},
{
"calculate": "datum['This Month (02/26/23 - 03/07/23)'][0].z",
"as": "This Month z"
},
{
"calculate": "datum['Last Month (01/01/23 - 02/04/23)'][1].y",
"as": "Last Month y"
},
{
"calculate": "datum['Last Month (01/01/23 - 02/04/23)'][1].z",
"as": "Last Month z"
}
],
"mark": "rule",
"encoding": {
"opacity": {
"condition": {"value": 0.3, "param": "hover", "empty": false},
"value": 0
},
"tooltip": [
{
"field": "This Month y",
"type": "nominal",
"title": "This Month y"
},
{
"field": "Last Month y",
"type": "nominal",
"title": "Last Month y"
},
{
"field": "This Month z",
"type": "nominal",
"title": "This Month z"
},
{
"field": "Last Month z",
"type": "nominal",
"title": "Last Month z"
}
]
},
"params": [
{
"name": "hover",
"select": {
"type": "point",
"fields": ["x"],
"nearest": true,
"on": "mouseover",
"clear": "mouseout"
}
}
]
}