✨ Feature Request: Separate Tooltip for Line Chart (Dot Press Interaction)

[ronak-gami]

Hello 👋,

First of all, thank you for this amazing library.
It’s been extremely helpful for building charts in our React Native app. 🙏

I’m currently using a BarChart with an overlaid line, where:

Bars represent Monthly Profit (%)

Line represents Total Balance ($)

I’m scaling the data so both can appear together nicely.

Bar press tooltip works great (showing: Profit: x%, Balance: $xxxxx.xx).

📌 Issue / Limitation

Right now, the library only supports tooltips on bar press.
There is no option to show a tooltip when the user presses on the line dots.

✨ What I need

When a user taps on any visible dot on the line chart, I want to show a separate tooltip for the line value, such as:
Balance: $10,443.41

Just like how bar tooltips are supported, a similar interaction for line points would create a much better UX, especially in dual-axis charts.

📷 Reference (Screenshots)
I'm attaching screenshots to show the current UI and the use case.

🙏 Request

Could you please consider adding support for:

✔ onPress / pointer interaction for line dots
✔ Custom tooltip for line values

This would greatly improve usability when working with combined charts (bar + line).

Thank you for your hard work and for maintaining this great library!
Happy to provide more details if needed. 😊

[Abhinandan-Kushwaha]

Hi @ronak-gami Thanks for requesting this feature. This has now available from versions 1.4.69 onwards using the properties dataPointLabelComponent and showDataPointLabelOnFocus inside the lineConfig prop.
dataPointLabelComponent is a callback function with 2 params- item and index.
See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/releases/tag/v1.4.69

[ronak-gami]

@Abhinandan-Kushwaha Thank you Bro...
i want to demo use of this component
this isn't working into mine.
might be i missed something.

can you please create docs for this or update to your site. "https://gifted-charts.web.app/"

@Abhinandan-Kushwaha
thanks again bro. for save my time.

[Abhinandan-Kushwaha]

Hi @ronak-gami I will fix this in the next release.

[ronak-gami]

ok @Abhinandan-Kushwaha bro..

[ronak-gami]

you can see issue clearly

i use this :
topLabelComponent: () => (
{${roiValue.toFixed(1)}%}
)

for this anything?
@Abhinandan-Kushwaha
@ak-quince

[ak-quince]

@ronak-gami try the lineBehindBars prop

[ronak-gami]

but i want line above the chart i want only x.x% above the line is it possible?

line must be above the bar chart it means lineBehindBars={false}

@ak-quince
@Abhinandan-Kushwaha

[Abhinandan-Kushwaha]

Hi @ronak-gami I have released a new version- 1.4.70 in which the line's tooltip hides when tapping anywhere else on the chart.
For the second issue, where the data point of a line hides the Bar's top label, we can't do much because the topLabel is a part of the Bar, and the line is displayed over the bars.

[ronak-gami]

ok for this issue i'll find something.
ok @Abhinandan-Kushwaha thank you bro for add this features...
again @Abhinandan-Kushwaha thanks buddy