Repository navigation
QA: Vega-Lite API Tooltip Not Showing in Framework #1391
Description
I am having trouble figuring out how to get a tooltip to render in framework using the Vega-Lite API (instead of the json spec).
If I use the json spec, e.g. some vega-lite code with mark: { type: "point", tooltip: { content: "data" } }, things work fine.
However, when I use the JavaScript API, no tooltip shows.
Here's are two reproducible example showcasing my issue:
- Using inside a card + resize function:
js-chunk:
```js
import { resize } from "npm:@observablehq/stdlib";
import vl from "observablehq:stdlib/vega-lite";
async function vlresize(
{ autosize = { type: "fit", contains: "padding" }, ...spec },
{ minWidth = 0, maxWidth = Infinity } = {}
) {
const chart = await vl.render({ spec: { ...spec, width: -1, autosize } });
return resize((width) => {
chart.value.width(Math.max(minWidth, Math.min(maxWidth, width)));
chart.value.run();
return chart;
});
}
const df = [
{ city: "Seattle", month: "Apr", precip: 2.68 },
{ city: "Seattle", month: "Aug", precip: 0.87 },
{ city: "New York", month: "Apr", precip: 3.94 },
{ city: "New York", month: "Aug", precip: 4.13 },
{ city: "Chicago", month: "Apr", precip: 3.62 },
{ city: "Chicago", month: "Aug", precip: 3.98 },
];
function scatterWithTooltip(data) {
const circles = vl
.markCircle()
.data(data)
.encode(
vl.x().fieldN("city"),
vl.y().fieldQ("precip"),
vl.color().fieldN("city"),
vl.tooltip([vl.fieldN("city"), vl.fieldQ("precip")])
);
return vlresize(circles.toObject());
}
div anchor:
<div class="card">${scatterWithTooltip(df)}</div>
I tried including an import from npm:vega-tooltip, but this didn't solve anything. I also tried experimenting with the content of the tooltip itself.
- I also tried excluding the resize and object conversion in favor of using just the
.render()call, and this failed as well:
```js
const circleChart = vl
.markCircle()
.data(df)
.encode(
vl.x().fieldN("city"),
vl.y().fieldQ("precip"),
vl.color().fieldN("city"),
vl.tooltip([vl.fieldN("city"), vl.fieldQ("precip")])
)
.render();
${view(circleChart)}
Appreciate any input or help here!
Activity