top of page

Display widget in tooltip

By default values and labels are displayed in tooltip. Also its possible to add additional information to tooltip by using script . Sometimes it would be more helpful to display a widget as tooltip.


  1. Create base chart - the chart in which we need to add tooltip.

  2. Create a dashboard and add a widget that needs to be displayed as tooltip. Size of widget in this dashboard should be small enough to fit in to the tooltip.

3. Add below script to base chart and update the variable 'dashboaardurl' with URL of dashboard we created for tooltip.

var category

widget.on('beforedatapointtooltip', function(se, ev){
	dashboardurl = ''
	redrawYN = category != ev.context.category
	category = ev.context.category

	filterPanel = ev.widget.metadata.panels[0].items[0].jaql
	filterPanel.filter = {
		explicit: true,
		members: [category],
		multiSelection: true

	filterjaql = {jaql: filterPanel}

	var filtersArray = [filterjaql];
	var filterString = JSON.stringify(filtersArray);
	var uriEncoded = encodeURIComponent(filterString);

	ev.template = `<iframe width="100%" frameborder="0" 


  • Supported widget - Line chart, Column chart, Bar chart, Pie chart

  • Currently this script doesn't support widget with 'breakby' panel. (It will be added in future)

  • Tooltip may take few seconds to load as it is actually a dashboard.

283 views0 comments

Recent Posts

See All


bottom of page