# Hovering over line\_series plot does not show values

**URL:** <https://community.wandb.ai/t/hovering-over-line-series-plot-does-not-show-values/8172>\
**Category:** W&B Help\
**Created:** [October 17, 2024, 4:06pm UTC](https://community.wandb.ai/t/hovering-over-line-series-plot-does-not-show-values/8172 "2024-10-17T16:06:46Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![brianprovost](https://avatars.discourse-cdn.com/v4/letter/b/58f4c7/32.png) [@brianprovost](https://community.wandb.ai/u/brianprovost)\
**Post date:** [October 17, 2024, 4:06pm UTC](https://community.wandb.ai/t/hovering-over-line-series-plot-does-not-show-values/8172/1 "2024-10-17T16:06:46Z")

</div>

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:

 ![CleanShot 2024-10-17 at 12.04.07@2x](https://us1.discourse-cdn.com/flex020/uploads/wandb/original/2X/8/81bc92118bff8366cb1f80f5f66ea527aa503a13.jpeg)

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:

 ![CleanShot 2024-10-17 at 12.05.59@2x](https://us1.discourse-cdn.com/flex020/uploads/wandb/original/2X/e/ecd017431b4c78c0e00fa51959e0807968ba0ffe.png)

---

<div class="post-metadata">

**Author:** ![artsiom](https://sea2.discourse-cdn.com/flex020/user_avatar/community.wandb.ai/artsiom/32/1001_2.png) [@artsiom](https://community.wandb.ai/u/artsiom)\
**Post date:** [October 21, 2024, 10:18pm UTC](https://community.wandb.ai/t/hovering-over-line-series-plot-does-not-show-values/8172/2 "2024-10-21T22:18:57Z")

</div>

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](https://vega.github.io/vega-lite/docs/tooltip.html).

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

 ![Screenshot 2024-10-21 at 3.18.23 PM](https://us1.discourse-cdn.com/flex020/uploads/wandb/original/2X/b/bb120c02407a4d39182db6e9afbe2b66ec9d6972.png)

 ![Screenshot 2024-10-21 at 3.17.07 PM](https://us1.discourse-cdn.com/flex020/uploads/wandb/original/2X/d/dd52ea6b4c5362b65b36eabf0cff69dbcb0ca012.png)

---

<div class="post-metadata">

**Author:** ![artsiom](https://sea2.discourse-cdn.com/flex020/user_avatar/community.wandb.ai/artsiom/32/1001_2.png) [@artsiom](https://community.wandb.ai/u/artsiom)\
**Post date:** [October 28, 2024, 2:41pm UTC](https://community.wandb.ai/t/hovering-over-line-series-plot-does-not-show-values/8172/3 "2024-10-28T14:41:39Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![brianprovost](https://avatars.discourse-cdn.com/v4/letter/b/58f4c7/32.png) [@brianprovost](https://community.wandb.ai/u/brianprovost)\
**Post date:** [October 28, 2024, 7:33pm UTC](https://community.wandb.ai/t/hovering-over-line-series-plot-does-not-show-values/8172/4 "2024-10-28T19:33:50Z")

</div>

Following up, I was able to modify the Vega-lite code to get what I wanted, thank you.

 ![CleanShot 2024-10-28 at 15.31.36@2x](https://us1.discourse-cdn.com/flex020/uploads/wandb/original/2X/3/372a542975f5bbf6ab4201e99fdae91f2c29b892.jpeg)

Code in case it’s helpful for anyone:

```auto
{
  "$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"
        }
      }
    } 
  ]
}

```