CODEWITHSUNDEEP
reactjstooltipbullet-chartantvg2plot
Nadzeya Yakimchyk
Nadzeya Yakimchyk

Reputation: 576

G2Plot AntV library. Customize a Bullet Chart tooltip (display names instead of indices)

Is it possible to customize a tooltip of a Bullet Chart to display names instead of indices?

enter image description here

Upvotes: 0

Views: 1090

Answers (1)

Malika Malik
Malika Malik

Reputation: 11

Yes you can customize tooltip of antv/g2plot to display your desired data. As I did in one of my antv/g2plot chart using customContent function in tooltip object :

tooltip: {
                            customContent: (count, data) => {
                                let c = null
                                let fileHtml = ''
                                data.forEach((d) => {
                                    c = d.data.datum.count
                                    d.data.datum.files.forEach((f) => {
                                        fileHtml += `<li>${f.original_artifact_name}</li>`
                                    })
                                })
                                return `<div><br/>
                                    <ul><h4>Appeared in ${c} files</h4>${fileHtml}</ul>
                                </div>`;
                            }
                        }

visual of my tooltip: enter image description here

Upvotes: 1

Related Questions