CODEWITHSUNDEEP
d3.jsvega-litevegaobservablehq
Scott F
Scott F

Reputation: 37

Tooltip with Multi-Series Line Chart in Vega-Lite API

I am trying to recreate this example in Vega-Lite API in an Observable notebook. I am able to recreate the ruler with the multiple line series from another example in Observable. But I am having trouble adding tooltips, I would like to add the symbol ticker and the price of the stock. Here is my Observable notebook. Where would I put the tooltip specifications? Thanks!

    plot = {
  // select a point for which to provide details-on-demand
  const hover = vl.selectSingle()
    .encodings('x')  // limit selection to x-axis value
    .on('mouseover') // select on mouseover events
    .nearest(true)   // select data point nearest the cursor
    .empty('none');  // empty selection includes no data points

  // define our base line chart 
  const line = vl.markLine()
  .data(stocks)
  .encode(
    vl.x().fieldT('date'),
    vl.y().fieldQ('price'),
    vl.color().fieldN('symbol'),
  );
  
  // shared base for new layers, filtered to hover selection
  const base = line.transform(vl.filter(hover));

  return vl.data(stocks)
    .layer(
      line,
      // add a rule mark to serve as a guide line
      vl.markRule({color:'#c0c0c0'})
        .transform(
          vl.filter(hover),
          vl.pivot({pivot: 'symbol', value: 'price', groupby: ['date']}))
        .encode(vl.x().fieldT('date'),
               vl.tooltip().fieldQ('price')),
      // add circle marks for selected time points, hide unselected points
      line.markCircle()
        .select(hover) // use as anchor points for selection
        .encode(vl.opacity().if(hover, vl.value(1)).value(0),
                vl.tooltip(['symbol','price']))
    )
    .render(); }

Upvotes: 0

Views: 1008

Answers (1)

John Alexis Guerra Gómez
John Alexis Guerra Gómez

Reputation: 523

Here's how you use pivot on that example

vl.pivot('symbol').value('price').groupby( ['date']))

The pivot there helps you getting the data into table format, so you can have all the symbol prices available in one row. Here is a full working example of a Vega-Lite API multi-line series chart with tooltips:

https://observablehq.com/@vega/multi-series-line-chart-with-tooltip

Upvotes: 1

Related Questions