MultiGridTooltip

• Name: MultiGrid Legend

• Description: Tooltip used in MultiGrid data type, similar to GridLegend in Grid data type. It also corresponds to rowLabels, but the difference is that rowLabels in MultiGrid data type's dataFormatter$ is under the gridList field (there are multiple sets).

• Playground Example

params$

• Type: Partial<MultiGridTooltipParams>

• Fields:

  Name	Description	Type
  backgroundColorType	Background color type	ColorType
  backgroundOpacity	Background opacity	number
  strokeColorType	Border color type	ColorType
  textColorType	Text color type	ColorType
  offset	Mouse cursor relative position (x, y)	[number, number]
  padding	Inner padding	number
  renderFn	Render function, can return three formats: (1) Plain text string (string) (2) Array of strings for multi-line text (string[]) (3) SVG tag content string (string)	(eventData: EventMultiGrid, context: { styles: BaseTooltipStyle; utils: BaseTooltipUtils }) => string[] | string

Detailed Types

type ColorType = 'none' | 'label' | 'labelContrast' | 'primary' | 'secondary' | 'background'

interface BaseTooltipStyle {
  backgroundColor: string
  backgroundOpacity: number
  strokeColor: string
  offset: [number, number]
  padding: number
  textColor: string
  textSize: number | string // chartParams setting
  textSizePx: number
  seriesColors: string[]
}

interface BaseTooltipUtils {
  measureTextWidth (text: string, size?: number): number
}

• Default values:

{
  backgroundColorType: 'background',
  strokeColorType: 'primary',
  backgroundOpacity: 0.8,
  textColorType: 'primary',
  offset: [20, 5],
  padding: 10,
  renderFn: (eventData, { styles, utils }) => {
    const bulletWidth = styles.textSizePx * 0.7
    const offset = (styles.textSizePx / 2) - (bulletWidth / 2)

    const titleSvg = `<g><text dominant-baseline="hanging" font-size="${styles.textSizePx}" fill="${styles.textColor}">${eventData.groupLabel}</text></g>`
    const groupLabelTextWidth = utils.measureTextWidth(eventData.groupLabel, styles.textSizePx)
    const listTextWidth = eventData.group.reduce((acc, group) => {
      const text = `${group.seriesLabel}${utils.toCurrency(group.value)}`
      const _maxTextWidth = utils.measureTextWidth(text, styles.textSizePx)
      return _maxTextWidth > acc ? _maxTextWidth : acc
    }, 0)
    const maxTextWidth = Math.max(groupLabelTextWidth, listTextWidth)
    const lineEndX = maxTextWidth + styles.textSizePx * 3
    const contentSvg = eventData.group
      .map((group, i) => {
        const y = i * styles.textSizePx * 1.5
        const isHighlight = group.id === (eventData.datum && eventData.datum.id)
        return `<g transform="translate(0, ${styles.textSizePx * 2})">
  <rect width="${bulletWidth}" height="${bulletWidth}" x="${offset}" y="${y + offset}" rx="${bulletWidth / 2}" fill="${group.color}"></rect>
  <text x="${styles.textSizePx * 1.5}" y="${y}" font-size="${styles.textSizePx}" dominant-baseline="hanging" fill="${styles.textColor}">
    <tspan font-weight="${isHighlight ? 'bold' : ''}">${group.seriesLabel}</tspan>
    <tspan font-weight="bold" text-anchor="end" x="${lineEndX}">${utils.toCurrency(group.value)}</tspan>
  </text>
</g>`
      })
      .join('')
    return `${titleSvg}
${contentSvg}`
  }
}