How can I show all series data for the vega/vaga lite tooltip like tsvb

[Roy_Zhang]

Dear Vega/vaga lite experts,

How can I show all series data for the vega/vaga lite tooltip like tsvb (just like the following graph)?

Thanks for ur help in advance!

Thanks,
Roy

[wylie (Wylie Conlon)]

Hi Roy- this is not the default behavior of Vega or Vega-Lite when using the tooltip plugin, so it will require more configuration from your side to get this. The main reason is that the tooltip plugin is operating on a single row in the data at a time, and usually each row is a single point in a series. So you basically have two options for how to make this work:

1. Use Vega transforms to copy the relevant series values onto multiple rows. This might involve using multiple datasets that you join together in some way?
2. In Vega (not Vega-Lite) you might be able to create a selection on the X axis that is able to select a dataset of multiple rows and render this as a tooltip.

This is getting into some highly custom logic though, so it will be difficult to help you other than generic advice like the kind I'm giving above.

[Roy_Zhang]

Thx Dear @wylie.

Regarding first option, yes, I am using the first option as I am using term to generate multiple series. Is there any example for the first option?

The following is my vega lite code, but the tooltip only show one series data.
Could u pls kindly help to have a look if possible? Thanks in advance!

  transform: [
    {
      flatten: [
        my_date_histo.buckets
      ]
      as: [
        buckets
      ]
    }
  ]

  // "encoding" tells the "mark" what data to use and in what way.  See https://vega.github.io/vega-lite/docs/encoding.html
  encoding: {
    x: {
      // The "key" value is the timestamp in milliseconds.  Use it for X axis.
      field: buckets.key
      type: temporal
      axis: {
        title: false
      } // Customize X axis format
    }
    y: {
      // The "doc_count" is the count per bucket.  Use it for Y axis.
      field: buckets.the_movfn.value
      type: quantitative
      axis: {
        title: false
      }
    }
    color: {
      field: key
      type: nominal
      title: false
    }
    tooltip: [
      /*{
        field: buckets.key
        type: temporal
        title: TimeStamp
      }*/
      {
        field: key
        type: nominal
        title: Instance
      }
      {
        field: buckets.the_movfn.value
        type: quantitative
        title: value
      }
    ]
  }
  layer: [{
    mark: area
  }, {
    mark: point

    selection: {
      pointhover: {
        type: single
        on: mouseover
        clear: mouseout
        empty: none
        fields: ["buckets.key", "key"]
        nearest: true
      }
    }

    encoding: {
      size: {
        condition: {
          selection: pointhover
          value: 100
        }
        value: 5
      }
      fill: {
        condition: {
          selection: pointhover
          value: white
        }
      }
    }
  }]
}





transform: [
    {
      flatten: [
        my_date_histo.buckets
      ]
      as: [
        buckets
      ]
    }
  ]

[wylie (Wylie Conlon)]

Hi Roy- like I said before, the first option is to "copy the relevant series values onto multiple rows". To give a JSON example, you would need to go from this kind of data:

[
  { x: 1, y: 100, key: 'A' },
  { x: 1, y: 200, key: 'B' },
]

to this:

[
  { x: 1, y: 100, key: 'A', tooltip: [{ y: 100, key: 'A' }, { y: 200, key: 'B' }] },
  { x: 1, y: 200, key: 'B', tooltip: [{ y: 100, key: 'A' }, { y: 200, key: 'B' }] },
]

[Roy_Zhang]

Thx @wylie, let me have a check.