Tooltips

All the visualizations within the standard library have the option to override their tooltips. Let's take a bar chart for example. A tooltip like the one below is rendered when hovering on one of the bars.

If we need to modify the tooltip content, we can create a function that sets a new HTML string to the ChartFactor tooltip object:

// Declare the function     
const tooltipBuilder = function (data, originalTooltipHtml, vizConfiguration) {
    const barName = data.name;
    const barMainValue = utils.formatNumericValue(data.value, { 
                            type: 'INTEGER' 
                        });
    const otherMetrics = data.data.current.current.metrics
    const newHtml = `
        <div style="padding: 10px">
            <span style="
                color:${data.color};
                font-weight:bold">
                    ${barName}
            </span>: 
            ${barMainValue}
        </div>`

    // Using the cf tooltip utility here
    cf.tooltip.set(newHtml, data.color);
};

cf.provider('Elastic')
    ...
    // Set the option to the visualization
    .set('customTooltip', tooltipBuilder)
    .execute()

The above configuration will render tooltips as shown below:

Tooltips can be enriched with the information passed to the tooltipBuilder function.

Parameters passed to the tooltipBuilder function

data: A JSON object with the data of the hovered canvas object. In this case the orange bar.

originalTooltipHtml: As the name states, it is the default HTML string created by ChartFactor. If we set this HTML instead of the new one, the result is the same as the original.

visConfig: The JSON configuration for the visualization. It's the equivalent to: cf.getVisualization('id').get()