SkiaChart: Texts including axis labels, tooltips, toolbox and legend are not rendered.

[nipunadodan]

Describe the bug
Texts including axis labels, tooltips, toolbox and legend are not rendered.

To Reproduce
Steps to reproduce the behaviour:

• Try a minimal example using SkiaChart with the below library versions.

"@wuba/react-native-echarts": "^1.3.1",
"@shopify/react-native-skia": "^0.1.241",
"echarts": "^5.5.0",
"react": "18.2.0",
"react-native": "^0.73.4",

Expected behaviour
Texts on axis labels, tooltips, legends and toolbox should be visible.

Screenshots
This is how it looks like when it is rendered using SkiaChart

This is how it is expected to look (screenshot taken after rendered using SVG)

Desktop (please complete the following information):

• OS: Ubuntu
• Browser: N/A
• Version: 22.04.4

Smartphone (please complete the following information):

• Device: Samsung A12
• OS: Android 13
• Browser: N/A
• Version: N/A

Additional context
Sample code: Github gist

[zhiqingchen]

use rnsvg or lower version of rnskia

[zhiqingchen]

Shopify/react-native-skia#2404

[AlejandroRM-DEV]

use rnsvg or lower version of rnskia

I switched to SvgChart and it worked, but is there any implication I should be aware of?

Thank you.

[zhiqingchen]

#16
@AlejandroRM-DEV

[nipunadodan]

use rnsvg or lower version of rnskia

I switched to SvgChart and it worked, but is there any implication I should be aware of?

Thank you.

Yes, I'm aware. SvgCharts works but it's slow to respond to gestures. That's why I explicitly need SkiaChart to work.

[Jay2009]

@nipunadodan yes I am having exactly same issue with you.
so any solution yet?

[liamjones]

@Jay2009 Below is what we've done as a workaround for now. It's not ideal but might help you (as long as you don't need react-native-skia for anything bar react-native-echarts on iOS).

@shopify/react-native-skia 0.1.234 is the last version that will render text in react-native-echarts. That version will crash/lock up an iOS app on RN 0.73.8 (the version of RN we're using, I haven't tried 0.74.x yet) but seems to work fine on Android. We want Skia rendering for slow Android devices as it's faster than SVG rendering. The iOS devices will use SVG rendering for now (since they have generally stronger performance).

How to set this up:

• Downgrade @shopify/react-native-skia to 0.1.234 in your package.json.
• Disable auto-linking of the module on iOS only by putting the following in your react-native.config.js (there's no point linking it if we can't use it):

module.exports = {
    dependencies: {
        '@shopify/react-native-skia': {
            platforms: {
                ios: null
            }
        }
    }
}

• Update our React component to use either SkiaChart or SvgChart depending on platform:

const SomeComponent = () => {
    const PlatformSpecificChartTag = Platform.OS === 'ios' ? SvgChart : SkiaChart
    return <PlatformSpecificChartTag option={...} etc />
}

[liamjones]

Now that react-native-skia have documented that text in ImageSVG tags is not going to be supported could we add that to the known issues on #16?

[hthieu1110]

I got the same issue, all Legend + Axises are blank, do we have a plan to fix that or is there a patch/hack in the meaning time ?

[zhiqingchen]

We can't use it until we do a big refactoring, or

1. You can also use the old version of skia.
2. Use react-native-svg for rendering

@hthieu1110

[hthieu1110]

thankss @zhiqingchen , in our case we have to enable RN New Architect which is not supported by old version of Skia.
So react-native-svg is a working option (but is quite slow in comparison with Skia). So we are looking forward for the new-refactored version :D

Thanks @zhiqingchen again for your reply.

[zhiqingchen]

I am working on the 2.x branch, and there has been some progress, but there is still a lot of work to be done.

If you are interested, please review the code and provide me with some feedback.

Rendered by skia above and rendered by svg below, skia also supports shadow, which is a nice feature.

[ducpt-bili]

hi @zhiqingchen , how can i try the 2.x branch, i can test it for you.

[zhiqingchen]

1. Clone this repo
2. switch to 2.x branch
3. yarn
4. cd example
5. yarn android/ios
6. debug in src/example dir

@ducpt-bili

[ducpt-bili]

Hi @zhiqingchen ,
I did like you said and here is the error.

1. OK
2. OK
3. yarn => fail with multiple error of TS.
4. OK
5. Error like image below

[ducpt-bili]

hi @zhiqingchen , any news on the version 2. Thanks.

[zhiqingchen]

dev version
2.0.0-canary.0

sample code
https://github.com/wuba/react-native-echarts/blob/2.x/example/src/App.tsx

[anon-r-7]

Following. Have the same problem.

[ducpt-bili]

hi @anon-r-7 , did you follow the @zhiqingchen guide and have the same problem like me?

[anon-r-7]

Yeah, I mean the whole reason I chose echarts over victory was for performance with skia. If I'm back down to svg anyways I'm not sure what the win is. Naturally I cannot downgrade RN, if anything I need to upgrade RN. I'm optimistic that zhiqingchen will have a solution soon. I'm tentatively using svg renderer until then.

[ducpt-bili]

hi @zhiqingchen , i able to run your 2.x example successfully, but it have some bug:

1. On android, text is showing, but tool tip not working on Skia chart.
2. On ios, text is NOT shoing, but tooltop is working on Skia chart.
   Thank you for your hard work.

[zhiqingchen]

@ducpt-bili thanks. Please provide the code of the bug.

[ducpt-bili]

hi @zhiqingchen , i just run the code in the example folder on 2.x branch, not add any thing new to it.
Both android and ios i run is in simulator or emulator.

[ducpt-bili]

hi @zhiqingchen , is there anything i can help for testing?

[zhiqingchen]

#193
Related discussion moved to this PR, your previous feedback question we have not repeated.https://github.com/user-attachments/assets/c3ab96f8-3320-4406-9699-cdd9bb02005a

[ducpt-bili]

hi @zhiqingchen , thank you.
Maybe i will wait for version 2 release to make sure my setup is up-to-date. Right now maybe some mismatch setup will happen.

Thank you again.

[zhiqingchen]

try 2.0.0-canary.3

[ducpt-bili]

@zhiqingchen let me take a quick test. Thank you.

[ducpt-bili]

I met this error below on ios simulator 17.4 when try 2.0.0-canary.3, with Skia chart.
Note: it work with previous version on Skia and when i change to SVG chart it work.
I try simple line chart example on documents and meet this same issue.

cc @zhiqingchen

[zhiqingchen]

try this demo @ducpt-bili
https://github.com/zhiqingchen/react-native-echarts-test

[ducpt-bili]

hi @zhiqingchen , i try out your repo and it work. Thank you.
The problem is from the renderer:
renderer: "svg" => Error like mine above.
renderer: "skia" => WORK
Looking forward for the stable release :D
Your library have potential to be the number one library of charts in React Native. Only one chart to be competitive is victory native xl, but it have some limit right now like horizontal scroll or limit number type of chart.
Thank you for your hard work.

[zhiqingchen]

https://wuba.github.io/react-native-echarts/docs/migration/v2

[ducpt-bili]

hi @zhiqingchen , so v2 is public release right? I will give it a try.
Thank you.

[zhiqingchen]

yes, and expo snacks are ready too.