Untitled

import React from 'react';
import { View } from 'react-native-ui-lib';
import { VictoryChart, VictoryArea, VictoryPolarAxis } from 'victory-native';
import { useColors } from '../../../hooks/useColors';

export function SpiderChart() {
  const { colors }: any = useColors();

  const data = [
    { x: 'Efficiency', y: 1.5 },
    { x: 'Growth', y: 3.5 },
    { x: 'Profitability', y: 4.2 },
    { x: 'Leverage', y: 2.5 },
    { x: 'Liquidity', y: 3 },
  ];

  return (
    <View center>
      <VictoryChart polar startAngle={90} endAngle={450}>
        <VictoryPolarAxis
          style={{
            axis: { strokeWidth: 0 },
            grid: { stroke: colors.secondaryText, strokeOpacity: 0.55 },
            tickLabels: { fontSize: 12, padding: 20, fill: colors.primaryText, angle: 360 },
          }}
        />
        <VictoryPolarAxis
          dependentAxis
          tickValues={['1', '2', '3', '4', '5']}
          style={{
            grid: { stroke: 'rgba(65, 105, 207, 1)', strokeWidth: 1, strokeDasharray: '9, 9', strokeOpacity: 0.55 },
            axis: { strokeOpacity: 0 },
            tickLabels: { fontSize: 11, padding: 10, fill: 'rgba(65, 105, 207, 1)', angle: 0, fillOpacity: 0.55 },
          }}
        />
        <VictoryArea
          data={data}
          style={{
            data: {
              fill: 'rgba(10, 109, 198, 0.5)',
              fillOpacity: 0.3,
              stroke: 'rgba(10, 109, 198, 1)',
              strokeWidth: 2,
            },
          }}
        />
      </VictoryChart>
    </View>
  );
}