Can't display tooltip at all in Vega Pie Chart

Elastic Stack Kibana
1

My following vega code correctly displays the actual chart and legend. However, I have been trying to get tooltip to display some data but the tooltips are not showing at all. Here is my latest code

{
  "$schema": "https://vega.github.io/schema/vega/v4.0.json",
  "title": "Top 10 IP Addresses",
  "data": [
    {
      "name": "table",
      "url": {
        "%context%": "true",
        "%timefield%": "@timestamp",
        "index": "alb-logs-*",
        "body": {
          "aggs": {
            "TopIP": {
              "terms": {
                "field": "elb_client_ip"
              }
            }
          }
        },
        "size": 0
      },
      "format": {
        "property": "aggregations.TopIP.buckets",
        "as": "values"
      },
      "transform": [
        {
          "type": "pie",
          "field": "doc_count"
        }
      ]
    }
  ],
  "legends": [     
    {
      "orient": "top-right",
      "stroke": "color",
      "title": "Origin",
      "encode": {
        "symbols": {
          "update": {
            "fill": {"value": ""},
            "strokeWidth": {"value": 2},
            "size": {"value": 64}
          }
        }
      }
    }
  ],
  "scales": [
    {
      "name": "color",
      "type": "ordinal",
      "domain": {
        "data": "table",
        "field": "key"
      },
      "range": {
        "scheme": "category20"
      }
    }
  ],
  "marks": [
    {
      "type": "arc",
      "from": {
        "data": "table"
      },
      "encode": {
        "enter": {
          "fill": {
            "scale": "color",
            "field": "key"
          },
          "startAngle": {
            "field": "startAngle"
          },
          "endAngle": {
            "field": "endAngle"
          },
          "x": {
            "signal": "width / 2"
          },
          "y": {
            "signal": "height / 2"
          },
          "outerRadius": {
            "signal": "min(width,height)/2.2"
          },
          "tooltip": {"signal": "datum.datum"}
        }
      }
    }
  ]
}

What am I missing?

2

Since you haven't provided a reproduceable data set for us to try, it might be that we are going to miss something obvious as well.

That being said, what is the signal datum.datum? The value datum is bound to the current context of the signal, and you're binding it on enter. Maybe you need to fix both your signal reference and the phase of your binding.

1 Like
3

@wylie Thanks for your suggestions. I sorted out the issue. I was using wrong field name in tooltip section and as a result the tooltip was not visible.
One additional question: How do I show percentage value of each slice in the tooltip? I presume it requires some kind of mathematical transform to compute based on the total number of docs for a given aggregate bucket but my Vega grammar knowledge is extremely poor and I am struggling. Is there an example of this anywhere?

4

I've never seen an example, but isn't that something you can calculated based on the pie transform? You could probably take (datum.endAngle - datum.startAngle) / (2 * PI) as your percentae.

1 Like
5

Excellent solution. I ended up with an expression like this
"tooltip": {"signal": "'IP: '+ datum['key']+', Count: '+ datum['doc_count'] + ' Share: '+ ceil(((datum['endAngle']-datum['startAngle'])/(2*PI))*100) + '%'"}

6

You could also use the format function to do something like format(value, '.2%') if I remember the syntax correctly. It's using d3-format internally.

7

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.