Sankey tooltip is wrong

Looker Q&A Looker
1

I have a sankey diagram that shows moving products within campaigns, data is correct and also the sankey diagram itself is showing correct movements and counts.

The problem is the tooltip, which is showing fromNode and toNode wrongly, leading to a tooltip showing make up mid score → make up high score: 96, but it should be the other way round.

pp_smec_0-1747202976749.png
pp_smec_0-1747202976749.png4384×1126 167 KB

The data used in the background for this is correct and in the correct order: source, target, weight. But also changing it did not change anything, so this seems not to be the problem

I tried to change the logic of the tooltip within the chart config editor. According to the highcharts documentation you should be able to manipulate the tooltip with the pointFormat and nodeFormat configuration.

Unfortunately they do not work with my code:

"pointFormat": "{point.fromNode.name} --> {point.toNode.name}: {point.weight}",
"nodeFormat": "{point.name}: {point.sum}"

It does not take this at all into consideration and falls back to the “standard” way which is the one described above which is in the wrong order.

The only thing working is the format configuration, but this leads to wrong behaviour of the node formatting, because if you provide a general tooltip.format, Highcharts tries to apply it to everything you hover over. When you hover over a node, it doesn’t have point.fromNode.name or point.toNode.name, which is why you’re seeing the literal “–>” and incorrect formatting for the nodes.

So i tried the formatter option, which should give me the possibility to distinguish between node and point formatting within the function provided.

"formatter": "function() { if (this.point.fromNode) { return this.point.fromNode.name + ' \u2192 ' + this.point.toNode.name + ': ' + this.point.weight; } else if (this.point.isNode) { return this.point.name + ': ' + this.point.sum; } else { return 'Hover point (type unknown)'; } }",

When hovering over the sankey I do not get a tooltip at all but errors in the console of my browser:

Uncaught TypeError: p.call is not a function

    at P.refresh (vendors-node_modules_styled-icons_material-outlined_ErrorOutline_ErrorOutline_esm_js-node_mod-f026d9-85f32d1266767820e8da.chunk.js:1:217967)

    at P.<anonymous> (vendors-node_modules_styled-icons_material-outlined_ErrorOutline_ErrorOutline_esm_js-node_mod-f026d9-85f32d1266767820e8da.chunk.js:1:106580)

    at P.<anonymous> (src_visualizations_components_Highcharts_HighchartsVisualization_tsx-a7ff88ad8296ac78065e.chunk.js:1:26167)

    at t.<computed> (vendors-node_modules_styled-icons_material-outlined_ErrorOutline_ErrorOutline_esm_js-node_mod-f026d9-85f32d1266767820e8da.chunk.js:1:106548)

    at n.<anonymous> (vendors-node_modules_styled-icons_material-outlined_ErrorOutline_ErrorOutline_esm_js-node_mod-f026d9-85f32d1266767820e8da.chunk.js:1:243739)

    at S (vendors-node_modules_styled-icons_material-outlined_ErrorOutline_ErrorOutline_esm_js-node_mod-f026d9-85f32d1266767820e8da.chunk.js:1:100698)

    at n.firePointEvent (vendors-node_modules_styled-icons_material-outlined_ErrorOutline_ErrorOutline_esm_js-node_mod-f026d9-85f32d1266767820e8da.chunk.js:1:226099)

    at C.runPointActions (vendors-node_modules_styled-icons_material-outlined_ErrorOutline_ErrorOutline_esm_js-node_mod-f026d9-85f32d1266767820e8da.chunk.js:1:243691)

    at n.onMouseOver (vendors-node_modules_styled-icons_material-outlined_ErrorOutline_ErrorOutline_esm_js-node_mod-f026d9-85f32d1266767820e8da.chunk.js:1:230801)

    at n.<anonymous> (vendors-node_modules_styled-icons_material-outlined_ErrorOutline_ErrorOutline_esm_js-node_mod-f026d9-85f32d1266767820e8da.chunk.js:1:106580)

What could be the issue and how can I solve it?

2

To be precise I’m trying to set up custom tooltips for a Sankey diagram on a Looker Dashboard using advanced_vis_config (via Highcharts).

I’ve encountered two main issues specifically on dashboards:

  1. tooltip.formatter Fails: When I try to use tooltip.formatter in advanced_vis_config (even with a very simple function string like function() { return ‘Test’; }), the dashboard shows no tooltip at all and the browser console logs: Uncaught TypeError: p.call is not a function The stack trace points to Highcharts internal functions (P.refresh, firePointEvent) and Looker’s HighchartsVisualization.tsx. This happens consistently, even when trying various syntaxes or using enabled: “true” (string) in the tooltip config. No CSP errors are present.

  2. pointFormat / nodeFormat Ignored: Attempts to use tooltip.pointFormat (for links) and tooltip.nodeFormat (for nodes) together – either at the top-level tooltip object or nested under plotOptions.sankey.tooltip – result in Looker ignoring these settings and reverting to a default tooltip display on the dashboard. Which is showing the tooltip wrong.

Partial (Undesirable) Success:

The only custom tooltip I’ve managed to display on the dashboard is for links, by using a global tooltip.format string (e.g., “{point.fromNode.name} → {point.toNode.name} {point.weight}”). However, this approach means node tooltips are incorrect (e.g., just showing “–>”).

My Question:

Given the p.call is not a function error with tooltip.formatter on dashboards, and the apparent difficulty in getting Looker to respect separate pointFormat and nodeFormat for Sankey diagrams in advanced_vis_config on dashboards:

  • Is there a known limitation or a specific required syntax/structure for advanced_vis_config to achieve distinct node and link tooltips for Sankey charts on Looker dashboards?
  • Are there workarounds for the p.call is not a function error when using tooltip.formatter in this context?
  • How can I reliably set different tooltip formats for Sankey nodes versus links on a dashboard?
3

any suggestions from anyone?

4

Hi,

I don’t know if it still bothers you, but I think I got the same issue and this seems to work for me :



tooltip: {
backgroundColor: ‘white’,
style: {
color: “black”
},
format: ‘{#if point.fromNode}{point.fromNode.name} \u2192 {point.toNode.name}: {point.weight:.f}{else}{point.name} : {point.sum:.f}{/if}’
},

and if you want the % of the previous node :

format: '{#if point.fromNode}{point.fromNode.name} \u2192 {point.toNode.name} : <br> {point.weight} ({(multiply 100 (divide point.weight point.fromNode.sum)):.2f} %){else}{point.name} : {point.sum:.f}{/if}'