CODEWITHSUNDEEP
vega-lite
hanzgs
hanzgs

Reputation: 1616

How to hide tooltip of overlapped line charts in vega-lite?

I have multiple line chart with tooltip showing the data, line chart looks like

enter image description here

I configured to show only the line that is clicked in legend and its tooltip when hover over the dot

enter image description here enter image description here

Since there are many parameter line which overlaps at some points, the tooltip sometimes showing the different parameter that is hiding, for example, in the above picture, I selected PRAUC line from legend and hover on its tooltip, but for the same line if I hover on different point, its showing different parameter value as that line is overlapping on this one, as below, but its line is hidden enter image description here

I have set the opacity value to 0.02 for the line, but even though if i hover i can see the tooltips, is it possible to show the tooltip for only the line that is selected, my full code is below

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.6.0.json",
  "title": "Model Dashboard",
  "data": {
    "url" : {
        "%context%": true,
        "index": "creditloan.ml_models_v2.comparison",
        "body": {
          "size":10000,
          "_source": ["Metrics","Value","modelName","modelAlgorithm","modelStartTime"],
        }
      }  
      "format": {"property": "hits.hits"},
  }, 
 "transform": [{
      "filter": "datum._source.Value <= 1.0"
     }],
 "mark": {
    "type": "line",
    "point": {
      "size": 250
    }
    "strokeWidth": 4,
    "strokeCap" : "round",
    "interpolate" :"monotone"
  },
 "selection": {
    "industry": {
      "type": "multi", "fields": ["_source.Metrics"], "bind": "legend"
    }
  },
 "encoding": {
    "x": {"field": "_source.modelStartTime", 
          "type": "nominal", 
          "title":"Models"
          "axis": {
            "labelAngle": -20,
            "labelLimit": 500,
            "labelFontSize" : 14
            },
          "sort": {"order": "descending", "field": "_source.modelStartTime"}  
          },
    "y": {"field": "_source.Value", 
          "type": "quantitative", 
          "title":"Metric Score",
          "scale": { "domain": [0.0, 1.0] }  
          },
    "color": {"field": "_source.Metrics", 
              "type": "nominal", 
              "title":"Metrics"},
    "tooltip": [
      {"field": "_source.Metrics", "type": "nominal", "title":"Metric"},
      {"field": "_source.Value", "type": "quantitative", "title":"Value"},
      {"field": "_source.modelAlgorithm", "type": "nominal", "title":"ModelAlgorithm"},
      {"field": "_source.modelStartTime", "type": "nominal", "title":"ModelStartTime"},
      {"field": "_source.modelName", "type": "nominal", "title":"ModelName"}
    ],
    "opacity": {
      "condition": {"selection": "industry", "value": 1},
      "value": 0.02
    }
  }
}

Upvotes: 2

Views: 660

Answers (1)

jakevdp
jakevdp

Reputation: 86330

To make it so that the tooltip doesn't show for hidden data, you can filter the data based on the selection; i.e. add this to your list of transforms:

{"filter": {"selection": "industry"}}

and then remove the opacity encoding.

Upvotes: 1

Related Questions