Standardize chart default tooltips

lib/js/src/compose/types/chart/chart.ts

@@ -142,7 +142,9 @@ export default class Chart extends BaseChart {
     options.series = datasets.map(({ type, label, data, stack, tooltip, fill, smooth, step, roseType, symbol }: any, index: number) => {
       const { fixed, relative } = tooltip
 
-      const tooltipFormatter = t?.formatting ? t.formatting : `{a}<br />{b} : {c}${relative ? ' ({d}%)' : ''}`
+      const tooltipFormatter = t?.formatting ? t.formatting : (params: any) => {
+        return `${params.seriesName}<br>${params.marker}${params.name}<span style="float: right; margin-left: 20px">${params.value}${relative ? ' (' + params.percent + '%)' : ''}</span>`
+      }
       const labelFormatter = `{@[1]}${relative ? ' ({d}%)' : ''}`
 
       // We should render the first metric in the dataset as the last
@@ -189,6 +191,7 @@ export default class Chart extends BaseChart {
           tooltip: {
             trigger: 'item',
             formatter: tooltipFormatter,
+            appendToBody: true,
           },
           label: {
             ...lbl,
@@ -257,6 +260,7 @@ export default class Chart extends BaseChart {
           tooltip: {
             trigger: 'axis',
             formatter: tooltipFormatter,
+            appendToBody: true,
           },
           label: {
             show: fixed,

lib/js/src/compose/types/chart/funnel.ts

@@ -92,7 +92,9 @@ export default class FunnelChart extends BaseChart {
     const { legend: l } = reports[0] || {}
     const colors = getColorschemeColors(colorScheme, data.customColorSchemes)
 
-    const tooltipFormatter = `{b}<br />{c} ${tooltip.relative ? ' ({d}%)' : ''}`
+    const tooltipFormatter = (params: any) => {
+      return `${params.seriesName}<br>${params.marker}${params.name}<span style="float: right; margin-left: 20px">${params.value}${tooltip.relative ? ' (' + params.percent + '%)' : ''}</span>`
+    }
     const labelFormatter = `{c}${tooltip.relative ? ' ({d}%)' : ''}`
 
     return {
@@ -112,7 +114,6 @@ export default class FunnelChart extends BaseChart {
         right: 5,
       },
       tooltip: {
-        show: true,
         trigger: 'item',
         formatter: tooltipFormatter,
         appendToBody: true,
@@ -134,8 +135,9 @@ export default class FunnelChart extends BaseChart {
         pageIconColor: themeVariables.black,
         pageIconInactiveColor: themeVariables.light,
       },
-      series: datasets.map(({ data }: any) => {
+      series: datasets.map(({ data, label }: any) => {
         return {
+          name: label,
           type: 'funnel',
           sort: 'descending',
           top: 45,
@@ -177,6 +179,7 @@ export default class FunnelChart extends BaseChart {
     const values = []
 
     let tooltip = {}
+    let label = ''
 
     // Above provided data sets might not have their labels/values ordered
     // correctly
@@ -190,6 +193,7 @@ export default class FunnelChart extends BaseChart {
       })
 
       tooltip = { ...tooltip, ...r.datasets[0].tooltip }
+      label = r.datasets[0].label
 
       // Construct labels & data based on provided reports
       const report = this.config.reports?.[ri]
@@ -236,6 +240,7 @@ export default class FunnelChart extends BaseChart {
     return {
       labels,
       datasets: [{
+        label,
         data,
       }],
       tooltip,

lib/js/src/reporter/types/display-elements/chart/basic.ts

@@ -50,7 +50,10 @@ export class BasicChartOptions extends ChartOptions {
           radius: [`${sr}%`, `${er}%`],
           center: ['50%', '55%'],
           tooltip: {
-            formatter: '{a}<br />{b} : {c} ({d}%)',
+            formatter: (params: any) => {
+              return `${params.seriesName}<br>${params.marker}${params.name}<span style="float: right; margin-left: 20px">${params.value} (${params.percent}%)</span>`
+            },
+            appendToBody: true,
           },
           label: {
             show: this.tooltips.showAlways,

lib/js/src/reporter/types/display-elements/chart/funnel.ts

@@ -42,7 +42,9 @@ export class FunnelChartOptions extends ChartOptions {
       tooltip: {
         show: true,
         trigger: 'item',
-        formatter: '{b} : {c} ({d}%)',
+        formatter: (params: any) => {
+          return `${params.seriesName}<br>${params.marker}${params.name}<span style="float: right; margin-left: 20px">${params.value} (${params.percent}%)</span>`
+        },
         appendToBody: true,
       },
       legend: {