React-native-svg-charts: combination chart wont work properly

[rohithnair1996]

What is the problem?

for combination charts like line chart inside bar chart with different datas wort work.and inner child always taking parent chart data...

[JesperLekland]

You can layer charts (absolute positioning) and get it to work. Aligning the axises is up to the user though, but it definitely works

[patrickbattisti]

yAcessor solve the problem 🥳

see this example:

  const data_ = [
    { bar: 1, line: 0.5 },
    { bar: 1.5, line: 1 },
    { bar: 2, line: 0.5 },
  ];

<BarChart
        style={{ height: 300 }}
        data={data_}
        yAccessor={({ item }) => item.bar}
        svg={{ fill: 'rgb(134, 65, 244)' }}
        yMin={0}
        yMax={3}>
        <LineChart
          yAccessor={({ item }) => item.line}
          style={{ height: 300 }}
          yMin={0}
          yMax={3}
          svg={{ stroke: '#444', strokeWidth: 3 }}
        />
        <Grid />     
</BarChart>

[aprilmintacpineda]

Some charts can be combined out of the box, like ProgressCircle:

<ProgressCircle
  style={{ height: 300 }}
  strokeWidth={10}
  progress={0.48}
  progressColor="#15ABA6"
>
  <PieChart
    style={{ height: 270, marginTop: 15}}
    valueAccessor={({ item }) => item.amount}
    data={data}
    spacing={0}
    innerRadius="50%"
    startAngle={startAngle}
  />
</ProgressCircle>