ReferenceError: Can't find variable: SVG in React Native react-apexchart

Question

Error : Requiring module "node_modules\react-apexcharts\dist\react-apexcharts.min.js", which threw an exception: ReferenceError: Can't find variable: SVG

I did research on this error but i didnt proper solution and this is package.json file of mine i m using react-apexchart with dep apexcharts even its giving error

{
  "name": "****",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android --reset-cache",
    "a": "react-native run-android",
  },
  "dependencies": {
    "apexcharts": "^3.46.0",
    "react": "16.13.1",
    "react-apexcharts": "^1.4.1",
    "react-native": "0.63.4",
    }

comp.tsx When I tried to implement

/* eslint-disable react-native/no-inline-styles */
import React, {memo} from 'react';
import {
  // TouchableOpacity,
  View,
} from 'react-native';
import {Appbar} from 'react-native-paper';
import {
  useNavigation,
  // DrawerActions
} from '@react-navigation/native';
import {withTheme} from 'react-native-paper';
import ReactApexChart from 'react-apexcharts';

function comp({theme}) {
  const navigation = useNavigation();
  const chartOptions = {
    // Define your chart options here
    chart: {
      type: 'line',
    },
    series: [
      {
        name: 'Series 1',
        data: [30, 40, 35, 50, 49, 60, 70, 91, 125],
      },
    ],
    xaxis: {
      categories: [
        'Jan',
        'Feb',
        'Mar',
        'Apr',
        'May',
        'Jun',
        'Jul',
        'Aug',
        'Sep',
      ],
    },
  };
  return (
    <>
      <Appbar.Header
        style={{borderBottomWidth: 2, borderColor: theme.colors.primary}}>
        <View>
          <Appbar.BackAction
            color={theme.colors.primary}
            onPress={() => {
              navigation.navigate('Profile');
            }}
          />
        </View>
        <Appbar.Content
          title="Stress Level"
          titleStyle={{
            color: theme.colors.primary,
            fontFamily: theme.fonts.thin.fontFamily,
            fontSize: 25,
          }}
        />
        {/* <TouchableOpacity
          onPress={() => navigation.dispatch(DrawerActions.openDrawer())}>
          <Appbar.Action icon="menu" color={theme.colors.primary} size={28} />
        </TouchableOpacity> */}
      </Appbar.Header>
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <ReactApexChart
          options={chartOptions}
          series={chartOptions.series}
          type="line"
          height={350}
        />
      </View>
    </>
  );
}

export default memo(withTheme(comp));

Answer 1

Replace your chartOptions from:

const chartOptions = {
  options:{
    chart: {type: 'line'},
    xaxis: {
      categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep'],
    },
  },
  series: [
    {
      name: 'Series 1',
      data: [30, 40, 35, 50, 49, 60, 70, 91, 125],
    },
  ],
};

And change ReactApexChart also to

 <ReactApexChart
   options={chartOptions?.options}
   series={chartOptions?.series}
   type="line"
   height={350}
 />