MultiValueTooltip

• Name: MultiValue Tooltip

• Description: Tooltip used for MultiValue data type.

• Playground Example

params$

• Type: Partial<MultiValueTooltipParams>

• Fields:

  Name	Description	Type
  backgroundColorType	Background color type	ColorType
  backgroundOpacity	Background opacity	number
  strokeColorType	Stroke color type	ColorType
  textColorType	Text color type	ColorType
  offset	Offset relative to the cursor (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 multiline text (string[]) (3) SVG tag content string (string)	(eventData: EventMultiValue, 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 hasCategoryLabel = eventData.categoryLabel === '' ? false : true
    const hasDatumLabel = eventData.datum == null || eventData.datum.label.slice(0, 11) === 'multiValue_' ? false : true
    const bulletWidth = styles.textSizePx * 0.7
    const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
    const categorySvg = hasCategoryLabel
      ? `<rect width="${bulletWidth}" height="${bulletWidth}" x="${offset}" y="${offset - 1}" rx="${bulletWidth / 2}" fill="${eventData.datum.color}"></rect>
  <text x="${styles.textSizePx * 1.5}" font-size="${styles.textSizePx}" dominant-baseline="hanging" fill="${styles.textColor}">
    <tspan>${eventData.categoryLabel}</tspan>
  </text>`
      : ''

    const datumLabelSvg = hasDatumLabel
      ? `<text font-size="${styles.textSizePx}" dominant-baseline="hanging" fill="${styles.textColor}">
    <tspan>${eventData.datum.label}</tspan>
  </text>`
      : ''

    const maxTextWidth = (() => {
      const categoryLabelTextWidth = utils.measureTextWidth(eventData.categoryLabel, styles.textSizePx)
      const datumLabelTextWidth = hasDatumLabel ? utils.measureTextWidth(eventData.datum.label, styles.textSizePx) : 0
      const valueDetailTextWidth = eventData.valueDetail.reduce((acc, detail) => {
        const text = `${detail.valueLabel}${utils.toCurrency(detail.value)}`
        const _maxTextWidth = utils.measureTextWidth(text, styles.textSizePx)
        return _maxTextWidth > acc ? _maxTextWidth : acc
      }, 0)
      return Math.max(categoryLabelTextWidth, datumLabelTextWidth, valueDetailTextWidth)
    })()

    const valueDetailSvg = eventData.valueDetail.map((detail, i) => {
      const y = (i * styles.textSizePx * 1.5) + (datumLabelSvg ? styles.textSizePx * 2 : 0)
      const lineEndX = maxTextWidth + styles.textSizePx * 3
      return `<text x="0" y="${y}" font-weight="bold" font-size="${styles.textSizePx}" dominant-baseline="hanging" fill="${styles.textColor}">
      <tspan>${detail.valueLabel}</tspan>
      <tspan text-anchor="end" x="${lineEndX}">${utils.toCurrency(detail.value)}</tspan>
    </text>`
    }).join('')

    const datumDetailSvg = datumLabelSvg || valueDetailSvg
      ? `<g ${hasCategoryLabel ? `transform="translate(0, ${styles.textSizePx * 2})"` : ''}>
    ${datumLabelSvg}
    ${valueDetailSvg}
  </g>`
      : ''

    return `${categorySvg}
${datumDetailSvg}`
  }
}