TradingPal / react-native-highcharts

📈 Add Highcharts charts to react-native app for IOS and Android
https://github.com/TradingPal/react-native-highcharts
255 stars 159 forks source link

Data Points(Marker as a SVG) do not fully render when compiling Android Build #131

Closed MohitDhingraMobileProgramming closed 1 year ago

MohitDhingraMobileProgramming commented 1 year ago

Screenshot_1664571875 I'm using HTML/CSS content for plotting chart data (using the HighCharts library for ReactNative) and then rendering as a PDF file. I am using the following packages

  1. react-native-html-to-pdf(Convert the html content to pdf) - Version is 0.12.0
  2. react-native-pdf (for preview the pdf) - Version is 6.6.2

The issue that I am facing is when the mobile app compiles to Android, the data points are not visible on the PDF file. Some of the data points are partially plotted but it appears that there is another layer hiding or overlaying the content. The same application, when compiling to iOS, plots all the data with no issues.

Below is the reference bar chart in IOS app ios_bar

Below is the reference bar chart in android app, The data is not fully plotting. android_bar

Scripts added in the HTML code

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
MohitDhingraMobileProgramming commented 1 year ago

In PlotOptions objects and add your chart type as a key in that object you just have to disable the animation Example:

 plotOptions: {
      scatter: {
           animation: false,
        }
 }