highcharts-react-native icon indicating copy to clipboard operation
highcharts-react-native copied to clipboard

Published 20 hours ago • verified publisher icon highcharts

chart rendering issue on android devices

Open wzhang2 opened this issue 4 years ago • 8 comments

i added a button to change the data, and it's working fine on both of the ios simulator and android emulator, as well as the ios device, but it is not working on an android phone, i'm just using useState and useCallback to control the states, but is this something i should do in chartOptions instead? my data and chartOptions are both states

wzhang2 avatar Aug 18 '20 14:08 wzhang2

I can see that render is called, but most of the time the chart just doesn't show up or doesn't change, this is totally fine on the following simulators/devices:

iOS simulator (11 pro) android emulator (android 10) iPhone 7, X, 11 pro

but its not working on any of the android devices that I have: pixel 2 huawei nexus p6

fyi I package full release builds for testing

wzhang2 avatar Aug 19 '20 00:08 wzhang2

here's a snippet of my code

  const renderChart = useCallback(() => {
        console.log('rendering')
        console.log(JSON.stringify(options));
        return (
            <HighchartsReactNative
                styles={lineChartStyles.container}
                options={options}
                loader={true}
                modules={modules}
                useCDN={true}
                useSSL={true}
            />
        )
    }, [options])


    return (
        renderChart()
    );

my versions:

"react": "16.9.0",
"react-native": "0.61.2",
"react-native-unimodules": "^0.7.0",
"metro-config": "^0.62.0",
"react-native-webview": "^10.4.1",
"@highcharts/highcharts-react-native": "^3.1.1"

wzhang2 avatar Aug 19 '20 00:08 wzhang2

and here's my device log


08-19 10:09:38.944   849   849 I /vendor/bin/hw/[email protected]: SRAM data: 2805000
08-19 10:09:38.959  2250  2814 D PowerUI : can't show warning due to - plugged: true status unknown: false
08-19 10:09:39.732  3335 12953 I CastDatabase: Saving the database
08-19 10:09:39.766  3335 12953 I SQLiteCastStore: [CastNetworkInfo] saved: 0, skipped: 0, [CastDeviceInfo]: saved 0, skipped 0, [Paired Guest Mode DeviceInfo] saved: 0, skipped: 0. [ProbedNetworks]: saved 0, skipped: 0, [ProbedSocketAddress]: saved 0, skipped: 0, [Network-Device pairs]: saved: 0
08-19 10:09:41.812   849   849 I /vendor/bin/hw/[email protected]: SRAM data: 2805000
08-19 10:09:47.754   930   981 I VSC     : @ 2962.847: [VSC] Request sensor 131074, sample_duration 0 ms, report_duration 0 ms
08-19 10:09:47.755   930   981 I VSC     : @ 2962.848: [VSC] Stopping sensor events for sensor 65537
08-19 10:09:53.743 13657 13701 I ReactNativeJS: rendering
08-19 10:09:53.743 13657 13701 I ReactNativeJS: {"title":{"text":null},"series":[{"data":[{"x":1440979200000,"y":8.146077235250216},{"x":1443571200000,"y":8.1166864173528},{"x":1446249600000,"y":8.251580482509606},{"x":1448841600000,"y":8.254880206036583},{"x":1451520000000,"y":8.191981661943107},{"x":1454198400000,"y":8.203756107024905},{"x":1456704000000,"y":8.148816808575456},{"x":1459382400000,"y":8.311180236198275},{"x":1461974400000,"y":8.398460108768317},{"x":1464652800000,"y":8.469247250024095},{"x":1467244800000,"y":8.4980706391901},{"x":1469923200000,"y":8.62022658812967},{"x":1472601600000,"y":8.691763801268088},{"x":1475193600000,"y":8.74652131018284},{"x":1477872000000,"y":8.775676095662709},{"x":1480464000000,"y":8.753385846677592},{"x":1483142400000,"y":8.8258849227561},{"x":1485820800000,"y":8.889944406921432},{"x":1488240000000,"y":8.988943140374015},{"x":1490918400000,"y":9.036007051682523},{"x":1493510400000,"y":9.100732318619896},{"x":1496188800000,"y":9.174408796358874},{"x":1498780800000,"y":9.195519937915494},{"x":1501459200000,"y":9.234378510797091},{"x":1504137600000,"y":9.308807340634921},{"x":1506729600000,"y":9.330154532125137},{"x":1509408000000,"y":9.36939375796211},{"x":1512000000000,"y":9.37297027698398},{"x":1514678400000,"y":9.376616938795056},{"x":1517356800000,"y":9.353279674979914},{"x":1519776000000,"y":9.28469467526281},{"x":1522454400000,"y":9.30652466892757},{"x":1525046400000,"y":9.273836409868263},{"x":1527724800000,"y":9.240977430308073},{"x":1530316800000,"y":9.217250014127828},{"x":1532995200000,"y":9.257643574896838},{"x":1535673600000,"y":9.206152171555297},{"x":1538265600000,"y":9.228366173075276},{"x":1540944000000,"y":9.185701028204244},{"x":1543536000000,"y":9.16150209752418},{"x":1546214400000,"y":9.240077027435207},{"x":1548892800000,"y":9.412635281877483},{"x":1551312000000,"y":9.463443765612316},{"x":1553990400000,"y":9.533294925363023},{"x":1556582400000,"y":9.603446020548132},{"x":1559260800000,"y":9.635837901461645},{"x":1561852800000,"y":9.754085547780933},{"x":1564531200000,"y":9.767505065672308},{"x":1567209600000,"y":9.675459184973885},{"x":1569801600000,"y":9.727478497027784},{"x":1572480000000,"y":9.77970623024355},{"x":1575072000000,"y":9.803000152922584},{"x":1577750400000,"y":9.923592195733988},{"x":1580428800000,"y":9.956767992708192},{"x":1582934400000,"y":9.882261816828494},{"x":1585612800000,"y":9.041601168281893},{"x":1588204800000,"y":9.301937164057795},{"x":1590883200000,"y":9.523633003278576},{"x":1593475200000,"y":9.686565630011541},{"x":1596153600000,"y":9.86},{"x":1597622400000,"y":9.91}],"name":"N/A","color":"#BFBFBF","type":"area","fillColor":{"linearGradient":{"x1":0,"x2":0,"y1":0,"y2":1},"stops":[[0,"#D7EFE4"],[1,"#AFDFC9"]]}}],"xAxis":{"type":"datetime","minTickInterval":2592000000,"ordinal":false},"yAxis":{"tickAmount":4},"tooltip":{"pointFormat":"{series.name}: <b>{point.y:.2f}</b><br/>","shared":true},"scrollbar":{"enabled":false},"legend":{"enabled":false,"layout":"horizontal","verticalAlign":"top","align":"center","floating":false,"shadow":false},"credits":{"enabled":false}}
08-19 10:09:53.760 13657 13701 I ReactNativeJS: timeframe changed to: 1Y
08-19 10:09:53.761 13657 13701 I ReactNativeJS: rendering
08-19 10:09:53.761 13657 13701 I ReactNativeJS: {"title":{"text":null},"series":[{"data":[{"x":1440979200000,"y":8.146077235250216},{"x":1443571200000,"y":8.1166864173528},{"x":1446249600000,"y":8.251580482509606},{"x":1448841600000,"y":8.254880206036583},{"x":1451520000000,"y":8.191981661943107},{"x":1454198400000,"y":8.203756107024905},{"x":1456704000000,"y":8.148816808575456},{"x":1459382400000,"y":8.311180236198275},{"x":1461974400000,"y":8.398460108768317},{"x":1464652800000,"y":8.469247250024095},{"x":1467244800000,"y":8.4980706391901},{"x":1469923200000,"y":8.62022658812967},{"x":1472601600000,"y":8.691763801268088},{"x":1475193600000,"y":8.74652131018284},{"x":1477872000000,"y":8.775676095662709},{"x":1480464000000,"y":8.753385846677592},{"x":1483142400000,"y":8.8258849227561},{"x":1485820800000,"y":8.889944406921432},{"x":1488240000000,"y":8.988943140374015},{"x":1490918400000,"y":9.036007051682523},{"x":1493510400000,"y":9.100732318619896},{"x":1496188800000,"y":9.174408796358874},{"x":1498780800000,"y":9.195519937915494},{"x":1501459200000,"y":9.234378510797091},{"x":1504137600000,"y":9.308807340634921},{"x":1506729600000,"y":9.330154532125137},{"x":1509408000000,"y":9.36939375796211},{"x":1512000000000,"y":9.37297027698398},{"x":1514678400000,"y":9.376616938795056},{"x":1517356800000,"y":9.353279674979914},{"x":1519776000000,"y":9.28469467526281},{"x":1522454400000,"y":9.30652466892757},{"x":1525046400000,"y":9.273836409868263},{"x":1527724800000,"y":9.240977430308073},{"x":1530316800000,"y":9.217250014127828},{"x":1532995200000,"y":9.257643574896838},{"x":1535673600000,"y":9.206152171555297},{"x":1538265600000,"y":9.228366173075276},{"x":1540944000000,"y":9.185701028204244},{"x":1543536000000,"y":9.16150209752418},{"x":1546214400000,"y":9.240077027435207},{"x":1548892800000,"y":9.412635281877483},{"x":1551312000000,"y":9.463443765612316},{"x":1553990400000,"y":9.533294925363023},{"x":1556582400000,"y":9.603446020548132},{"x":1559260800000,"y":9.635837901461645},{"x":1561852800000,"y":9.754085547780933},{"x":1564531200000,"y":9.767505065672308},{"x":1567209600000,"y":9.675459184973885},{"x":1569801600000,"y":9.727478497027784},{"x":1572480000000,"y":9.77970623024355},{"x":1575072000000,"y":9.803000152922584},{"x":1577750400000,"y":9.923592195733988},{"x":1580428800000,"y":9.956767992708192},{"x":1582934400000,"y":9.882261816828494},{"x":1585612800000,"y":9.041601168281893},{"x":1588204800000,"y":9.301937164057795},{"x":1590883200000,"y":9.523633003278576},{"x":1593475200000,"y":9.686565630011541},{"x":1596153600000,"y":9.86},{"x":1597622400000,"y":9.91}],"name":"N/A","color":"#BFBFBF","type":"area","fillColor":{"linearGradient":{"x1":0,"x2":0,"y1":0,"y2":1},"stops":[[0,"#D7EFE4"],[1,"#AFDFC9"]]}}],"xAxis":{"type":"datetime","minTickInterval":2592000000,"ordinal":false},"yAxis":{"tickAmount":4},"tooltip":{"pointFormat":"{series.name}: <b>{point.y:.2f}</b><br/>","shared":true},"scrollbar":{"enabled":false},"legend":{"enabled":false,"layout":"horizontal","verticalAlign":"top","align":"center","floating":false,"shadow":false},"credits":{"enabled":false}}
08-19 10:09:53.762 13657 13701 I ReactNativeJS: series length 13
08-19 10:09:53.763 13657 13701 I ReactNativeJS: rendering
08-19 10:09:53.763 13657 13701 I ReactNativeJS: {"title":{"text":null},"series":[{"data":[{"x":1440979200000,"y":8.146077235250216},{"x":1443571200000,"y":8.1166864173528},{"x":1446249600000,"y":8.251580482509606},{"x":1448841600000,"y":8.254880206036583},{"x":1451520000000,"y":8.191981661943107},{"x":1454198400000,"y":8.203756107024905},{"x":1456704000000,"y":8.148816808575456},{"x":1459382400000,"y":8.311180236198275},{"x":1461974400000,"y":8.398460108768317},{"x":1464652800000,"y":8.469247250024095},{"x":1467244800000,"y":8.4980706391901},{"x":1469923200000,"y":8.62022658812967},{"x":1472601600000,"y":8.691763801268088},{"x":1475193600000,"y":8.74652131018284},{"x":1477872000000,"y":8.775676095662709},{"x":1480464000000,"y":8.753385846677592},{"x":1483142400000,"y":8.8258849227561},{"x":1485820800000,"y":8.889944406921432},{"x":1488240000000,"y":8.988943140374015},{"x":1490918400000,"y":9.036007051682523},{"x":1493510400000,"y":9.100732318619896},{"x":1496188800000,"y":9.174408796358874},{"x":1498780800000,"y":9.195519937915494},{"x":1501459200000,"y":9.234378510797091},{"x":1504137600000,"y":9.308807340634921},{"x":1506729600000,"y":9.330154532125137},{"x":1509408000000,"y":9.36939375796211},{"x":1512000000000,"y":9.37297027698398},{"x":1514678400000,"y":9.376616938795056},{"x":1517356800000,"y":9.353279674979914},{"x":1519776000000,"y":9.28469467526281},{"x":1522454400000,"y":9.30652466892757},{"x":1525046400000,"y":9.273836409868263},{"x":1527724800000,"y":9.240977430308073},{"x":1530316800000,"y":9.217250014127828},{"x":1532995200000,"y":9.257643574896838},{"x":1535673600000,"y":9.206152171555297},{"x":1538265600000,"y":9.228366173075276},{"x":1540944000000,"y":9.185701028204244},{"x":1543536000000,"y":9.16150209752418},{"x":1546214400000,"y":9.240077027435207},{"x":1548892800000,"y":9.412635281877483},{"x":1551312000000,"y":9.463443765612316},{"x":1553990400000,"y":9.533294925363023},{"x":1556582400000,"y":9.603446020548132},{"x":1559260800000,"y":9.635837901461645},{"x":1561852800000,"y":9.754085547780933},{"x":1564531200000,"y":9.767505065672308},{"x":1567209600000,"y":9.675459184973885},{"x":1569801600000,"y":9.727478497027784},{"x":1572480000000,"y":9.77970623024355},{"x":1575072000000,"y":9.803000152922584},{"x":1577750400000,"y":9.923592195733988},{"x":1580428800000,"y":9.956767992708192},{"x":1582934400000,"y":9.882261816828494},{"x":1585612800000,"y":9.041601168281893},{"x":1588204800000,"y":9.301937164057795},{"x":1590883200000,"y":9.523633003278576},{"x":1593475200000,"y":9.686565630011541},{"x":1596153600000,"y":9.86},{"x":1597622400000,"y":9.91}],"name":"N/A","color":"#BFBFBF","type":"area","fillColor":{"linearGradient":{"x1":0,"x2":0,"y1":0,"y2":1},"stops":[[0,"#D7EFE4"],[1,"#AFDFC9"]]}}],"xAxis":{"type":"datetime","minTickInterval":2592000000,"ordinal":false},"yAxis":{"tickAmount":4},"tooltip":{"pointFormat":"{series.name}: <b>{point.y:.2f}</b><br/>","shared":true},"scrollbar":{"enabled":false},"legend":{"enabled":false,"layout":"horizontal","verticalAlign":"top","align":"center","floating":false,"shadow":false},"credits":{"enabled":false}}
08-19 10:09:53.764 13657 13701 I ReactNativeJS: rendering
08-19 10:09:53.764 13657 13701 I ReactNativeJS: {"title":{"text":null},"series":[{"data":[{"x":1567209600000,"y":9.675459184973885},{"x":1569801600000,"y":9.727478497027784},{"x":1572480000000,"y":9.77970623024355},{"x":1575072000000,"y":9.803000152922584},{"x":1577750400000,"y":9.923592195733988},{"x":1580428800000,"y":9.956767992708192},{"x":1582934400000,"y":9.882261816828494},{"x":1585612800000,"y":9.041601168281893},{"x":1588204800000,"y":9.301937164057795},{"x":1590883200000,"y":9.523633003278576},{"x":1593475200000,"y":9.686565630011541},{"x":1596153600000,"y":9.86},{"x":1597622400000,"y":9.91}],"name":"PIMCO GIS Income Fund E Class SGD (Hedged) Income","color":"#BFBFBF","type":"area","fillColor":{"linearGradient":{"x1":0,"x2":0,"y1":0,"y2":1},"stops":[[0,"#D7EFE4"],[1,"#AFDFC9"]]}}],"xAxis":{"type":"datetime","minTickInterval":2592000000,"ordinal":false},"yAxis":{"tickAmount":4},"tooltip":{"pointFormat":"{series.name}: <b>{point.y:.2f}</b><br/>","shared":true},"scrollbar":{"enabled":false},"legend":{"enabled":false,"layout":"horizontal","verticalAlign":"top","align":"center","floating":false,"shadow":false},"credits":{"enabled":false}}
08-19 10:09:55.526 13657 13701 I ReactNativeJS: rendering
08-19 10:09:55.526 13657 13701 I ReactNativeJS: {"title":{"text":null},"series":[{"data":[{"x":1567209600000,"y":9.675459184973885},{"x":1569801600000,"y":9.727478497027784},{"x":1572480000000,"y":9.77970623024355},{"x":1575072000000,"y":9.803000152922584},{"x":1577750400000,"y":9.923592195733988},{"x":1580428800000,"y":9.956767992708192},{"x":1582934400000,"y":9.882261816828494},{"x":1585612800000,"y":9.041601168281893},{"x":1588204800000,"y":9.301937164057795},{"x":1590883200000,"y":9.523633003278576},{"x":1593475200000,"y":9.686565630011541},{"x":1596153600000,"y":9.86},{"x":1597622400000,"y":9.91}],"name":"PIMCO GIS Income Fund E Class SGD (Hedged) Income","color":"#BFBFBF","type":"area","fillColor":{"linearGradient":{"x1":0,"x2":0,"y1":0,"y2":1},"stops":[[0,"#D7EFE4"],[1,"#AFDFC9"]]}}],"xAxis":{"type":"datetime","minTickInterval":2592000000,"ordinal":false},"yAxis":{"tickAmount":4},"tooltip":{"pointFormat":"{series.name}: <b>{point.y:.2f}</b><br/>","shared":true},"scrollbar":{"enabled":false},"legend":{"enabled":false,"layout":"horizontal","verticalAlign":"top","align":"center","floating":false,"shadow":false},"credits":{"enabled":false}}
08-19 10:09:55.543 13657 13701 I ReactNativeJS: timeframe changed to: 6M
08-19 10:09:55.545 13657 13701 I ReactNativeJS: rendering
08-19 10:09:55.545 13657 13701 I ReactNativeJS: {"title":{"text":null},"series":[{"data":[{"x":1567209600000,"y":9.675459184973885},{"x":1569801600000,"y":9.727478497027784},{"x":1572480000000,"y":9.77970623024355},{"x":1575072000000,"y":9.803000152922584},{"x":1577750400000,"y":9.923592195733988},{"x":1580428800000,"y":9.956767992708192},{"x":1582934400000,"y":9.882261816828494},{"x":1585612800000,"y":9.041601168281893},{"x":1588204800000,"y":9.301937164057795},{"x":1590883200000,"y":9.523633003278576},{"x":1593475200000,"y":9.686565630011541},{"x":1596153600000,"y":9.86},{"x":1597622400000,"y":9.91}],"name":"PIMCO GIS Income Fund E Class SGD (Hedged) Income","color":"#BFBFBF","type":"area","fillColor":{"linearGradient":{"x1":0,"x2":0,"y1":0,"y2":1},"stops":[[0,"#D7EFE4"],[1,"#AFDFC9"]]}}],"xAxis":{"type":"datetime","minTickInterval":2592000000,"ordinal":false},"yAxis":{"tickAmount":4},"tooltip":{"pointFormat":"{series.name}: <b>{point.y:.2f}</b><br/>","shared":true},"scrollbar":{"enabled":false},"legend":{"enabled":false,"layout":"horizontal","verticalAlign":"top","align":"center","floating":false,"shadow":false},"credits":{"enabled":false}}
08-19 10:09:55.546 13657 13701 I ReactNativeJS: series length 7
08-19 10:09:55.546 13657 13701 I ReactNativeJS: rendering
08-19 10:09:55.546 13657 13701 I ReactNativeJS: {"title":{"text":null},"series":[{"data":[{"x":1567209600000,"y":9.675459184973885},{"x":1569801600000,"y":9.727478497027784},{"x":1572480000000,"y":9.77970623024355},{"x":1575072000000,"y":9.803000152922584},{"x":1577750400000,"y":9.923592195733988},{"x":1580428800000,"y":9.956767992708192},{"x":1582934400000,"y":9.882261816828494},{"x":1585612800000,"y":9.041601168281893},{"x":1588204800000,"y":9.301937164057795},{"x":1590883200000,"y":9.523633003278576},{"x":1593475200000,"y":9.686565630011541},{"x":1596153600000,"y":9.86},{"x":1597622400000,"y":9.91}],"name":"PIMCO GIS Income Fund E Class SGD (Hedged) Income","color":"#BFBFBF","type":"area","fillColor":{"linearGradient":{"x1":0,"x2":0,"y1":0,"y2":1},"stops":[[0,"#D7EFE4"],[1,"#AFDFC9"]]}}],"xAxis":{"type":"datetime","minTickInterval":2592000000,"ordinal":false},"yAxis":{"tickAmount":4},"tooltip":{"pointFormat":"{series.name}: <b>{point.y:.2f}</b><br/>","shared":true},"scrollbar":{"enabled":false},"legend":{"enabled":false,"layout":"horizontal","verticalAlign":"top","align":"center","floating":false,"shadow":false},"credits":{"enabled":false}}
08-19 10:09:55.547 13657 13701 I ReactNativeJS: rendering
08-19 10:09:55.547 13657 13701 I ReactNativeJS: {"title":{"text":null},"series":[{"data":[{"x":1582934400000,"y":9.882261816828494},{"x":1585612800000,"y":9.041601168281893},{"x":1588204800000,"y":9.301937164057795},{"x":1590883200000,"y":9.523633003278576},{"x":1593475200000,"y":9.686565630011541},{"x":1596153600000,"y":9.86},{"x":1597622400000,"y":9.91}],"name":"PIMCO GIS Income Fund E Class SGD (Hedged) Income","color":"#BFBFBF","type":"area","fillColor":{"linearGradient":{"x1":0,"x2":0,"y1":0,"y2":1},"stops":[[0,"#D7EFE4"],[1,"#AFDFC9"]]}}],"xAxis":{"type":"datetime","minTickInterval":2592000000,"ordinal":false},"yAxis":{"tickAmount":4},"tooltip":{"pointFormat":"{series.name}: <b>{point.y:.2f}</b><br/>","shared":true},"scrollbar":{"enabled":false},"legend":{"enabled":false,"layout":"horizontal","verticalAlign":"top","align":"center","floating":false,"shadow":false},"credits":{"enabled":false}}
08-19 10:09:41.834  2250  2814 D PowerUI : can't show warning due to - plugged: true status unknown: false
08-19 10:10:19.490  1314  1366 V DisplayPowerController: Brightness [6] reason changing to: 'automatic [ dim ]', previous reason: 'automatic'.
08-19 10:10:22.626   930   981 I CHRE    : @ 2997.721: [ImuCal] [NanoSensorCal:GYRO_RPS] Offset | Temperature [C]: 0.027103, -0.000604, 0.015525 | 28.36

wzhang2 avatar Aug 19 '20 02:08 wzhang2

Could you share your simplified app? It will allow us to reproduce the problem.

sebastianbochan avatar Aug 19 '20 07:08 sebastianbochan

thanks i shall add that in the next few days. right now i added some delay and it's working

wzhang2 avatar Aug 20 '20 17:08 wzhang2

Thank you for information.

sebastianbochan avatar Aug 21 '20 07:08 sebastianbochan

@Denyllon @sebastianbochan maybe i can try to help fix this issue since that's probably easier, is there anything i need to do before contributing?

wzhang2 avatar Sep 06 '20 05:09 wzhang2

@wzhang2 Would be good to only see the description how did you find the source of this problem, and detailed info about the suggested changes. I need to also inform you about the fact, that the time finish the review and testing your code may be extended (don't really know how much).

Denyllon avatar Sep 07 '20 09:09 Denyllon