Hello, i have some visualizations, and I need to show some custom informtion in the tooltip, I was wondering if it is possible to somehow customize the content shown in the tooltip, using the data that is shown when hovering.
Custom tooltip for visualizations
emoya
#2
Actually there is a way to do it and it is documented, you can take a look in the tooltips documentation, here is an example:
// 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()