Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Question] How Can i make my custom tooltip template in bar chart ?

See original GitHub issue

♻️ 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.

Issue Analytics

State:
Created 4 years ago
Comments:5 (4 by maintainers)

Top GitHub Comments

4reactions

netilcommented, Jul 17, 2019

@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.

0reactions

netilcommented, Aug 7, 2019

🎉 This issue has been resolved in version 1.10.0 🎉

The release is available on:

Your semantic-release bot 📦🚀