Billboard.js: [Question] How Can i make my custom tooltip template in bar chart ?

[SoYoung210]

♻️ env

• React (latest)
• TypeScript (latest)
• Chrome (latest)
• OS : Mojave 10.14.5
  

  Description

I want to make my custom tooltip in bar-chart.
With reference to options.d.ts and documentation, I wrote the following:

// in bb.generate({}), in useEffect(React Hooks) 
      data: {
        columns: [['data3', 130, -150, 200, 300, -200, 100]],
        type: 'bar',
        colors: {
          data3: '#E1E1E1',
        },
      },
      tooltip: {
        grouped: false,

        contents(
          data: any,
          defaultTitleFormat: string,
          defaultValueFormat: string,
          color: any
        ) {
          return {
            bindto: '#tooltip',
            template:
              '<ul><li>Index<br>{=TITLE}</li>{{<li class={=CLASS_TOOLTIP_NAME}><span>{=VALUE}:{=VAR}</span><br><span style=color:{=COLOR}>{=NAME}</span></li>}}</ul>',
          };
        },
      },

<>
      <div id="bar-chart"></div>
      <div id="tooltip"></div>
</>

I expect sample Result.
But My Result... is..

How Can I solve It?

Steps to check or reproduce

Generate billboard chart in useEffect.

[netil]

I'm seeing tooltip.contents option value isn't set properly.
If you check the example mentioned above, you need set options as follows.

tooltip: {
    grouped: false,
    contents: {
        bindto: '#tooltip',
        template: '<ul><li>Index<br>{=TITLE}</li>{{<li class={=CLASS_TOOLTIP_NAME}><span>{=VALUE}</span><br><span style=color:{=COLOR}>{=NAME}</span></li>}}</ul>',
    },
}

[SoYoung210]

Thanks for reply!
I check example, but I think options.d.ts is something different.

Here's options.d.ts

export interface TooltipOptions {
        // some options... 
    /**
     * Set custom position for the tooltip.
     * This option can be used to modify the tooltip position by returning object that has top and left.
     */
    position?(
        data: any,
        width: number,
        height: number,
        element: any
    ): { top: number; left: number };

    /**
     * Set custom HTML for the tooltip.
     * Specified function receives data, defaultTitleFormat, defaultValueFormat and color of the data point to show.
     * If tooltip.grouped is true, data includes multiple data points.
     */
    contents?: (
        data: any,
        defaultTitleFormat: string,
        defaultValueFormat: string,
        color: any
    ) => string | {
        /**
         * Set CSS selector or element reference to bind tooltip.
         */
        bindto?: string | HTMLElement;

        /**
         * Within template, below syntax will be replaced using template-like syntax string:
         *  - {{ ... }}: the doubly curly brackets indicate loop block for data rows
         *  - {=CLASS_TOOLTIP}: default tooltip class name `bb-tooltip`.
         *  - {=CLASS_TOOLTIP_NAME}: default tooltip data class name (ex. `bb-tooltip-name-data1`)
         *  - {=TITLE}: title value
         *  - {=COLOR}: data color
         *  - {=VALUE}: data value
         */
        template?: string;

        /**
         * Set additional text content within data loop, using template syntax.
         *  - NOTE: It should contain `{ key: Array, ... }` value
         *    - 'key' name is used as substitution within template as '{=KEY}'
         *    - The value array length should match with the data length
         */
        text?: { [key: string]: string[] | number[] }
    };

I think contents in tooltipConfig is function.
@netil

Type '{ bindto: string; template: string; }' is not assignable to type '(data: any, defaultTitleFormat: string, defaultValueFormat: string, color: any) => string | { bindto?: string | HTMLElement; template?: string; text?: { [key: string]: string[] | number[]; }; }'.

[netil]

@SoYoung210, this was caused by the incorrect definition. I'll fix that and thanks for noticing me that. :)
Sometimes definition can be erroneous(like this time), so always try consulting from API docs.

[netil]

:tada: This issue has been resolved in version 1.10.0-next.1 :tada:

The release is available on:

• npm package (@next dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[netil]

:tada: This issue has been resolved in version 1.10.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: