Hello, I am plotting three different Y values vs one X value using the line_series function. When I view this chart on W&B, it correctly displays the values. However, is there any way to have the values displayed at a single point when I hover over the chart with my cursor? Currently, no values are displayed:
I am still able to interact with the plot by zooming in/out, but no hovering. For reference, I would like the behavior below if possible:
Hi @brianprovost! Thank you for writing in!
Currently, in the example above you are using our W&B custom charts. We use Vega-lite to set up those charts up. Vega does offer tooltip customization here in their docs.
You will be able to edit your vega spec by clicking the edit button on your chart and then pressing the edit button inside of the chart settings
Hi, since we have not heard back from you, we are going to close this request. If you would like to reopen the conversation, please let us know! Unfortunately, at the moment, we do not receive notifications if a thread reopens on Discourse. So, please feel free to create a new ticket regarding your concern if you’d like to continue the conversation.
Following up, I was able to modify the Vega-lite code to get what I wanted, thank you.
Code in case it’s helpful for anyone:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A plot for an arbitrary number of lines",
"data": {
"name": "wandb"
},
"transform": [
{"filter": {"field": "${field:lineVal}", "valid": true}},
{"filter": {"field": "${field:step}", "valid": true}}
],
"title": "${string:title}",
"layer": [
{
"mark": {"type": "line", "interpolate": "linear"},
"encoding": {
"x":{
"field": "${field:step}",
"type": "quantitative",
"title": "${string:name}"
},
"y": {
"field": "${field:lineVal}",
"title": "y",
"type": "quantitative"
},
"color": {
"type": "nominal",
"field": "name",
"scale" : {
"range" : {"field": "color"}
}
},
"strokeDash": {
"type": "nominal",
"field": "${field:lineKey}"
}
}
},
{
"transform": [{"pivot": "lineKey", "value":"lineVal", "groupby": ["step", "name"]}],
"mark": {"type":"rule", "tooltip":true},
"params": [{
"name": "hover",
"select": {"type": "point", "fields": ["step", "name"], "on": "mouseover", "nearest":true, "clear": "mouseout"}
}],
"encoding": {
"x": {
"field": "step",
"type": "quantitative"
},
"tooltip":[
{"field": "name", "type":"nominal", "title":"Model"},
{"field": "Precision", "type":"quantitative"},
{"field": "Recall", "type":"quantitative"},
{"field": "F1", "type": "quantitative"},
{"field": "step", "type": "quantitative", "title": "Threshold"}
],
"color": {
"condition": {
"param": "hover",
"empty": false,
"value": "black"
},
"value": "transparent"
}
}
},{
"mark":{"type":"circle", "size": 60},
"encoding": {
"x":{
"field": "${field:step}",
"type": "quantitative",
"title": "${string:name}"
},
"y": {
"field": "${field:lineVal}",
"title": "y",
"type": "quantitative"
},
"color": {
"condition": {
"param": "hover",
"empty": false,
"field": "name"
},
"value": "transparent"
}
}
}
]
}