What is the correct way to read an item's color from the Vega scenegraph?

Viewed 51

I am rendering a graph using vega that has a custom color scheme. The graph also has a custom tooltip via vega-tooltip. I would like the tooltip to be the same color as the series which is being hovered over. This requires knowing the color of the feature that is being hovered.

The only thing that has worked so far is something like this:

let pathGroup = [];

const view = new vega.View(parsed, {
  container: $el,
  hover: true,
  renderer: "canvas",
  tooltip: new vt.Handler({
    formatTooltip: (value, sanitize) => {
      const myPath = pathGroup.filter((s: any) => s.datum.key === value.key)[0];
      const color = myPath.items[0].items[0].stroke;

      return `
        <div id="vg-tooltip-inner">
          <span id="vg-tooltip-inner-key" style="background: ${color}"> 
            ${sanitize(value.key)}
          </span>
          <span id="vg-tooltip-inner-value">
            ${sanitize(value.value)}
          </span>
        </div>
      `;
    },
  }).call,
});

pathGroup = view.scenegraph().root.items[0].items.filter(
  (item) => item.name === "layer_0_pathgroup"
)[0].items;

My original idea was to add a computed field to my tooltip encoding, but I wasn't able to figure out how to access stroke in that way. I also would prefer not to rely on hardcoded names like "layer_0_pathgroup", or positions in internal arrays.

Is there a cleaner or more appropriate way to access a property like this stroke?

0 Answers
Related