Data from different (non-plotted) series in Highcharts Tooltip without CCs

Heyho!

Is it possible to access non-plotted series data in a Highcharts point Tooltip without going JavaScript function?
via the point, I can theoretically access the plotted series and even its underlying data containing all series (including ones that are not plotted). I cannot “navigate” the array structures in series or data, though.
I’ve found multiple online examples - all of them involve custom code which is only possible in Apps via Custom Components which I’m currently trying to avoid (for multiple reasons - especially due to setup simplicity and portability of the App).

3 Likes

Hi Flogge,

have you tried such a piece of code?

"tooltip": {
      "pointFormat": 
                          "<span style=\"color:{series.color}\">{series.name}</span>: 
                           <b>{point.y}</b> {point.change}%<br/>",
      "valueDecimals": 2
    }

This reference is embedded in the code just like the plotOptions configuration or filterOptions in the highcharts element.

A more detailed documentation of these references can be found here:

Hope this helps
Magy

Jep, sure.

in pointFormat, you can use certain variables like point.low, point.high (for range charts), point.x, point.y and even point.series.data (which seems to be a dead end since I can’t access other series in the data from here because array access via positions seems not to work - neither in series nor in data). Unfortunately, everything I could obtain from the framework is related to what’s already in the plot.

I’d like to access a cell in the point’s row that is not plotted (same position in a different series of the input data). There are ways to achieve this but everything I found involves JavaScript.

3 Likes

is there any update to this issue?

Hello together,

there is an update to this issue (by courtesy of @peter.ziewer who figured out this walk-around):

In order to use the data from non-plotted series in a tooltip, you first have to make this series invisible (while not making use of the option to “hide” the series, explicitly). These invisible series only serve the purpose to pass the data so that they can be used in the tooltip. By then using the “shared”-tooltip-functionality, it is possible to combine the data from each series to write the tooltip.

Line-Chart-Example: Say you want to produce the following tooltip:

You need to specify the chart config in the following way:

    "series": [
      {
        "name": "Sold Articles",   // This series will be shown
        "turboThreshold": 0,
        "tooltip": {
          "pointFormat": ""          // In this example, this series does not have a tooltip.
        }
      },
      {
        "name": "Precipitation",   // This series will NOT be shown
        "showInLegend": false,   // turns legend off
        "lineWidth": 0,                 // no line will be shown
        "tooltip": {
          "enabled": false,           // tooltip of individual series will not be shown
          "pointFormat": "{point.y} cm Precipitation.<br/>".   // tooltip part 1: used in shared tooltip below
        },
        "marker": {
          "enabled": false,           // markers gets disabled
          "states": {
            "hover": {
              "enabled": false        // hover-effects get disabled
            }
          }
        },
        "states": {
          "hover": {
            "enabled": false       // hover-effects get disabled
          }
        },
        "dataLabels": {
          "enabled": false        // data labels get disabled --> finally, the line is completely invisible
        }
      },
      {
        "name": "Average Price",  // This series will NOT be shown, the same disablements are needed
        "showInLegend": false,
        "lineWidth": 0,
        "tooltip": {
          "enabled": false,
          "pointFormat": "The average price was {point.y}€."   // tooltip part 2: used in shared tooltip below
        },
        "marker": {
          "enabled": false,
          "states": {
            "hover": {
              "enabled": false
            }
          }
        },
        "states": {
          "hover": {
            "enabled": false
          }
        },
        "dataLabels": {
          "enabled": false
        }
      },
    "tooltip": {
      "shared": true,     // to combine tooltips 1 and 2
      "useHTML": true,
      "headerFormat": ""  // if you want to get rid of the default header of the tooltip
    }
1 Like

The same logic applies to other chart elements, for example bar charts.

By outsourcing the “annoying” part of the code (making the series invisible) to a partial, it is possible to re-use the “making-invisible-partial” in different chart elements (again, this solution is provided by @peter.ziewer ).

So if the partial definition looks like this…

{
  "id": "hiddenSeries",
  "partial": {
    "showInLegend": false,
    "lineWidth": 0,  // only applies to line charts, but does not hurt
    "pointPadding": 100,  // makes bar invisible
    "marker": {
      "enabled": false
    },
    "states": {
      "hover": {
        "enabled": false
      }
    },
    "dataLabels": {
      "enabled": false
    }
  }
}

…you can use the partial in the chart element in the following way:

    "series": [
      {
        "name": "Sold Articles",
        "turboThreshold": 0,
        "tooltip": {
          "pointFormat": ""
        }
      },
      {
        "@": {
          "partial": "hiddenSeries",
          "override": {
            "name": "Precipitation",
            "tooltip": {
              "pointFormat": "{point.y} cm Precipitation.<br/>"
            }
          }
        }
      },
      {
        "@": {
          "partial": "hiddenSeries",
          "override": {
            "name": "Average Price",
            "tooltip": {
              "pointFormat": "The average price was {point.y}€."
            }
          }
        }
      }
    ],
    "tooltip": {
      "shared": true,
      "useHTML": true,
      "headerFormat": ""
    }

… to produce the following tooltip:

1 Like

My solution is documented with code of example apps in Confluence:
https://confluence.intranet.onelogic.de/x/l12zB

1 Like