Untitled

import React from 'react';
import { View } from 'react-native-ui-lib';
import { VictoryChart, VictoryBar, VictoryAxis, VictoryGroup, VictoryLabel } from 'victory-native';
import { Defs, LinearGradient, Stop } from 'react-native-svg';

import { GradientArea } from './GradientArea';
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 },
  ];
  return (
    <VictoryChart domainPadding={20} width={400} height={300}>
      <Defs>
        <LinearGradient id="gradient" x1="0" y1="0" x2="1" y2="0">
          <Stop offset="30%" stopColor={'#F64646'} />
          <Stop offset="60%" stopColor={'#D6BB32'} />
          <Stop offset="100%" stopColor={'#40B457'} />
        </LinearGradient>
      </Defs>

      <VictoryAxis
        tickFormat={() => null}
        style={{
          axis: { stroke: 'white' },
          ticks: { stroke: 'white' },
          tickLabels: { fill: 'white' },
        }}
      />
      <VictoryAxis
        dependentAxis
        tickFormat={() => null}
        style={{
          axis: { stroke: 'transparent' },
          ticks: { stroke: 'transparent' },
          tickLabels: { fill: 'transparent' },
        }}
      />

      <VictoryGroup>
        <VictoryBar
          data={data}
          horizontal
          x="x"
          y="y"
          style={{
            data: {
              fill: 'url(#gradient)',
              width: 4,
              borderRadius: 3,
            },
          }}
          labels={({ datum }) => datum.y} // Show the y-value as labels on the bars
          labelComponent={<VictoryLabel dy={-20} />} // Adjust the dy value to position the label correctly
        />
      </VictoryGroup>
    </VictoryChart>
  );
}