SvgChart doesn't renders scrollable legend properly in Android

[guri8751]

We are using SvgChart renderer from the package imported like this:

import SvgChart, { SVGRenderer } from '@wuba/react-native-echarts/svgChart';

When we render a chart with a legend without adding the "type" to "scroll", it displays the legend fine. But if we add the scrolling attribute in the legend configuration of the chart, it doesn't displays the legend properly and just shows it half. And when we press on the right arrow to scroll, the legend becomes completely invisible. This issue is only seen in Android and it works perfectly fine in iOS with everything same. Also, one thing to note that SkiaChart renderer doesn't have this issue at all either in Android or iOS but cannot use that because of it's huge size and drastically increased build time.

[zhiqingchen]

Also have this problem when the legend's orient is set to vertical?

  legend: {
    type: 'scroll',
    orient: 'vertical',
    right: 10,
    top: 20,
    bottom: 20,
    data: data.legendData
  },

[zhiqingchen]

Try commenting out this code to see if this is the effect here: lib/module/svgChart.js

  // fix: https://github.com/react-native-svg/react-native-svg/issues/983
  if (attrs.clipPath && !attrs.clipRule && Platform.OS === 'android') {
    attrs.clipRule = 'nonzero';
  }

[guri8751]

Hi @zhiqingchen,

1. Changing the orientation to vertical does show them vertically but there is no scrolling functionality then and it acquires a lot of space as well which is not adequate for our needs.
2. I tried out your suggestion and commented the code you specified. On commenting the code, the legend is shown properly at first. But the line graph disappears from the chart and once I press the arrow to scroll to the right, the legend disappears completely then and doesn't reappear at any stage.

[zhiqingchen]

Yes, we found this problem too, let me think about how to fix it.

[zhiqingchen]

There's no good way to fix it yet, in your scenario, with a temporary patch.

  // fix: https://github.com/react-native-svg/react-native-svg/issues/983
  if (Platform.OS === 'android' && attrs.clipPath && !attrs.clipRule) {
    const allChildrenIsLine = children?.every((child) => {
      const d = child.attrs.d?.toString() || '';
      return (
        child.tag === 'path' &&
        child.attrs.fill === 'none' &&
        d[d.length - 1] !== 'Z'
      );
    });
    if (allChildrenIsLine) {
      attrs.clipRule = 'nonzero';
    }
  }

Also skia has better performance when tested and is more recommended.

[guri8751]

Hi @zhiqingchen, the temporary patch that you suggested seems to work as expected. As you're now aware of the issue, are you planning to put this patch or a different permanent fix in the next release? Thanks :)

[zhiqingchen]

If there is no more suitable method, this patch will be adopted soon.

[zhiqingchen]

@iambool 1.2.2-alpha.3

[TomWq]

我更换了用Skia来渲染,然后遇到中文乱码的问题,然后寻找中文乱码的解决方法,提示用SVG渲染或设置字体,然后我去设置字体,在安卓上感觉没效果呀

[zhiqingchen]

https://github.com/wuba/taro-playground/blob/main/src/pages/explore/charts/pages/bar/mixTimelineFinance.tsx

1. 尝试将依赖，升级到最新版
2. 可能有某些系统/机型不支持，未全面验证过

[TomWq]

我设置了下全局的字体 ,现在使用的是Skia渲染, ios上一切正常,在安卓上好像不生效,还是乱码,但是使用SVG渲染就可以,我不知道我的代码哪里写的有问题 ,我还需要做哪些修改才可以呢 亲亲 { series:[ { type:'bar', showBackground:false, data: array.map((item) => item.count), barWidth: 22, axisTick: { alignWithLabel: true }, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#2378f7' }, { offset: 0.7, color: '#2378f7' }, { offset: 1, color: '#83bff6' } ]), borderType:'dashed', borderRadius: [2, 2, 0, 0] },

              label:{
                show:true,
                fontSize:8
              }
            }
          ],
          tooltip: {
            trigger: 'axis',
            showDelay: 0, 
            show: true,
            axisPointer: {
              type: 'shadow',
              shadowStyle: {
                color: 'rgba(247, 54, 93, 0.04)',
                width: '1',
              },
            },
            backgroundColor: 'rgba(0,0,0,0.7)',
            formatter: function (params) {
              // onChange(params,array)
              return params[0].name + ': ' + params[0].value;
            },
            borderWidth: 0,
            extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0);',
            textStyle: {
              color: '#fff',

            }
          },
          yAxis: {
            type: 'value',
            show:false
          },
          xAxis: {
            type: 'category',
            data: array.map((item) => item.showTime),
            axisLine :{
              lineStyle:{
                color:'#888',

              }
            },
            nameLocation:'start',
            nameTextStyle:{
              color:'#888',
              fontSize:8,

            },
            axisTick:{
              show:false
            },
            axisLabel:{
              color:'#888',
              fontSize:8,

            }
          },
          textStyle:{
            fontFamily:'monospace'
          }

}

[TomWq]

我用你提供的示例的代码,放到我的项目里允许也是乱码

[Manikanta-GEP]

Is there any fix available now?

[Manikanta-GEP]

@zhiqingchen Is that patch available now in 1.2.3?

[zhiqingchen]

@zhiqingchen Is that patch available now in 1.2.3?

no, it's not final solution.

[xSmile-art]

我通过 将 react-native-skia 升级至 0.1.216 版本，并通过 自定义字体解决了中文乱码问题， 目前在 华为平板、oneplus、oppo 上测试没问题

[zhiqingchen]

我通过 将 react-native-skia 升级至 0.1.216 版本，并通过 自定义字体解决了中文乱码问题， 目前在 华为平板、oneplus、oppo 上测试没问题

@xSmile-art 你使用的是什么字体？

[NguyenHoangMinhkkkk]

Hi, i'm using react-native-echarts 1.2.5 with react-native-svg 12.1.1 get exactly same issue, but my project unable to install Skia for replacing Svg. is there a solution for temporary fix ?

[shenxiang216]

@zhiqingchen 你好，给您发了邮件，有空查收下

[zaidqureshi95]

my chart is wrapped in Scrollview and and tooltip disturb when I starting touching the chart to see the tooltip it start little bit scrolling

[zhiqingchen]

my chart is wrapped in Scrollview and and tooltip disturb when I starting touching the chart to see the tooltip it start little bit scrolling

try use RNGH，https://wuba.github.io/react-native-echarts/docs/advanced-guides/use-rngh