Custom data points are not shown on web

[jeanniton-mnr]

Description

Hello!

While this library is quite extensive, it is very buggy.

I am copying the exact code sample to generate a line chart, LineChart, with a vertical strip and custom data points.

However, the custom data points are not shown on the web. I must be misunderstanding something.

Thank you!

Steps to reproduce

1. The source of the code sample is from the documentation, and can be found at:
   https://gifted-charts.web.app/areachart/#customDataPoints

2. I've provided a reference to the Expo Snack:
   https://snack.expo.dev/@jeanniton.mnr/custom-data-points-and-vertical-strip?platform=web

Snack or a link to a repository

https://snack.expo.dev/@jeanniton.mnr/custom-data-points-and-vertical-strip?platform=web

version of react-native-gifted-charts

React Native version

Platforms

Web

Workflow

Expo Go

PS: I have installed react-gifted-charts, I have the same bad results.

[jeanniton-mnr]

When I examine the rendered SVG element code, I notice that the custom data points appear as DIV objects inserted directly into the SVG.

However, SVG only renders other XML or HTML content if it is embedded within the SVG foreignObject.

Would that be a way of approaching and fixing this issue?

[Abhinandan-Kushwaha]

Hi @jeanniton-mnr Thanks for reporting it and suggesting the fix. Your suggestion to use <ForeignObject> worked like a charm!

It has been fixed from versions 1.4.48 onwards. Please use the latest version of the library.