Tooltip

Confine tooltip example

ODS Charts library uses the tooltip containment feature of the Apache ECharts library to ensure that the tooltip or popover is displayed within the confines of the graph, avoiding overflow beyond the display window.

This function is activated by configuring the graph options as follows:

tooltip: {
    confine: true,
}
              

Specific value tooltip content

You may need to specify a specific tooltip content.

The first use case is to provide a sepcific content for a tooltip/popover value.

For that you just have to specify the formatter method of the tooltip Apache Echarts option :

                tooltip: {
                  formatter: function (params) {
                    return `<span style="color: red; font-size:x-large">${Math.round(params[0].value * 100) / 100}</span> °C\`;
                  },
                },
              

Other specific content

if you want to specialize more than the value display, you can use the second parameter of the method externalizePopover.

This parameter must implement the ODSChartsPopoverDefinition interface. Generally this is initialized with one of the tooltip managers provided ODSChartsPopoverManagers.BOOSTED5, ODSChartsPopoverManagers.BOOSTED4 or ODSChartsPopoverManagers.NONE.
ODSChartsPopoverManagers.NONE is the default one.

You can extend the tooltip manager to implement one of the ODSChartsPopoverDefinition method.

For example, in the example below, we extend the tooltip manager to implement getPopupContentLine method and return the html code to be displayed for one line:

                themeManager.externalizePopover(undefined, {
                  ...ODSCharts.ODSChartsPopoverManagers.NONE,
                  getPopupContentLine: ({ seriesName, itemValue }) => {
                    return `<p>This is my HTML code of one line for ${itemValue} of ${seriesName}</p>`;
                  },
                });
              

Using Boosted 5 tooltip

The same code using the Boosted 5 tooltips:

                themeManager.externalizePopover(undefined, {
                  ...ODSCharts.ODSChartsPopoverManagers.BOOSTED5,
                  getPopupContentLine: ({ seriesName, itemValue }) => {
                    return `<p>This is my HTML code of one line for ${itemValue} of ${seriesName}</p>`;
                  },
                });
              

Tooltip with HTML link(s)

You may need to specify a specific tooltip which include a link.

In this case, you must set to true the parameter enterable of the tooltip Apache Echarts option:

                tooltip: {
                  enterable: true,
                },
              

Using links in a Boosted 5 tooltip

The same code using the Boosted 5 tooltips: