{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"Tooltip","description":"Accelerate E&P application development and protect your innovation by consuming our Data and Domain APIs / Platform APIs.","lang":"en-US","meta":[{"name":"robots","content":"noindex"}],"llmstxt":{"hide":true,"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"tooltip","__idx":0},"children":["Tooltip"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"overview","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/pages/charts/tooltip/tooltip#Overview"},"children":["#"]}," Overview"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["ChartWidget has a built-in interactive tooltip system designed to display relevant information about the displayed data and charts in response to user actions. It is based on the TooltipTool (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["tooltip"]}," identifier), which uses the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["selection"]}," callback to collect the data of interest to the user, and the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["tooltip"]}," callback to form a clear and descriptive tooltip:"]},{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/tooltip-flowchart.d3d832529b1d5941b0b1a10b505dd773e46515611bb002a8606167fb689e4676.ab02c158.png"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This is the default logic and can be changed if necessary. Also, both callbacks can be completely changed by the user, but in case of small edits they are exported in the module as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["defaultSelectionCallback"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["defaultTooltipCallback"]}," respectively. Let's look at them in more detail."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"selection-callback","__idx":2},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/pages/charts/tooltip/tooltip#selectionCallback"},"children":["#"]}," Selection Callback"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The purpose of the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["selection"]}," callback is to search for data located in the selected area provided by one of the input parameters. The return value is the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["SelectedItem"]}," array, which stores a separate chart as a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["sender"]}," and the corresponding data (data series identifiers and indices) as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["data"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To make the legend interactive, one of the check conditions is to search for legend items. If one is found, it is considered that the data represented by the corresponding item is selected. In addition, the algorithm takes into account the user ChartWidget ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["selectionmode"]}," setting, which allows selection by ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["vertical"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["horizontal"]}," line. In general, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["defaultSelectionCallback"]}," works as follows:"]},{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/selection-callback-flowchart.2d6d360f28faf382f75f8d21f1a35fec4e2eba8a4f463cea6e6160f0f14200e1.ab02c158.png"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The user can write their own algorithm or add changes before or after the call, for example, to exclude highlighting for some events / when a certain button is pressed, or show highlighting of only one chart, etc. This callback also plays an important role in the default highlight algorithm. You can find more details about it ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/pages/charts/datasource/dataSource#selectionTool"},"children":["here"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"tooltip-callback","__idx":3},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/pages/charts/tooltip/tooltip#tooltipCallback"},"children":["#"]}," Tooltip Callback"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["tooltip"]}," callback purpose is to generate the display of the tooltip content based on the selected data received. Depending on the circumstances and preferences, the data can be presented in different forms: briefly, as a list, as a table, etc. To do this, the user can create their own callback and generate the content as they wish. However, at the moment, let's analyze available user parameters and the behavior of the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["defaultTooltipCallback"]},", which groups data into lists relative to each chart:"]},{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/tooltip-callback-flowchart.f9ebefd7d1f188b2232638bc9e128b6007628b080137518066a68f433e74ad90.ab02c158.png"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["It is important to note that ChartWidget has a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["title"]}," parameter that goes into the title of the entire tooltip, while the individual ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["title"]}," of a each chart tooltip titles the list of series specifically for it. Just as a user can rewrite the tooltip callback for the entire ChartWidget, he can change the algorithm for specific charts individually. By default, a chart generates a tooltip as a list of all series related to this chart and their values. This format can also be changed using a template string (both for the entire chart and for individual series)."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In addition, the standard tooltip supports symbol (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["${symbol}"]},") shapes for those charts that have them (which is the majority, for example, the CrossPlot chart). If possible, this symbol is placed in the center of the list to clearly illustrate the corresponding data. If the user wants to simplify the appearance of the list while preserving the displayed information about the color of the selected values, they can use the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["${list}"]}," symbol, which creates a standard list element filled with the illustrated color."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For details, please see the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Charts/Tooltip/tooltip"},"children":["tooltip tutorials"]},"."]}]},"headings":[{"value":"Tooltip","id":"tooltip","depth":1},{"value":"Overview","id":"overview","depth":3},{"value":"Selection Callback","id":"selection-callback","depth":3},{"value":"Tooltip Callback","id":"tooltip-callback","depth":3}],"frontmatter":{"title":"Tooltip","seo":{"title":"Tooltip"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/programmers-guide/architecture-overview/charts/tooltip","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}