How to use the @patternfly/react-charts.ChartThemeColor.green function in @patternfly/react-charts

constrainToVisibleArea
            data={{ x: 'Storage capacity', y: used }}
            height={300}
            labels={({ datum }) => (datum.x ? `${datum.x}: ${datum.y}%` : null)}
            legendData={[{ name: `Storage capacity: ${spacer}${used}%` }, { name: 'Unused' }]}
            legendOrientation="vertical"
            legendPosition="bottom"
            padding={{
              bottom: 75, // Adjusted to accommodate legend
              left: 8,
              right: 8,
              top: 8
            }}
            subTitle="of 100 GBps"
            title={`${used}%`}
            themeColor={ChartThemeColor.green}
            themeVariant={ChartThemeVariant.light}
            thresholds={[{ value: 60 }, { value: 90 }]}
            width={230}
          />
        
      
    );
  }
}

export const GaugeChart: React.FC = ({
  data,
  error,
  humanize = humanizePercentage,
  invert = false,
  loading,
  query = '',
  remainderLabel = 'available',
  themeColor = ChartThemeColor.green,
  thresholds = DEFAULT_THRESHOLDS,
  title,
  usedLabel = 'used',
  // Don't sort, Uses previously declared props
  label = data ? humanize(data.y).string : 'No Data',
  secondaryTitle = usedLabel,
  className,
}) => {
  const [ref, width] = useRefWidth();
  const ready = !error && !loading;
  const status = loading ? 'Loading' : error;
  const labels = ({ datum: { x, y }}) => x ? `${x} ${usedLabel}` : `${y} ${remainderLabel}`;
  return (

legendData={[
              { name: 'Cats' },
              { name: 'Dogs', symbol: { type: 'dash' } },
              { name: 'Birds' },
              { name: 'Mice' }
            ]}
            legendOrientation="vertical"
            legendPosition="right"
            height={250}
            padding={{
              bottom: 50,
              left: 50,
              right: 200, // Adjusted to accommodate legend
              top: 50
            }}
            themeColor={ChartThemeColor.green}
            width={600}
          >

constructor(props) {
    super(props);
    this.title = "Deliveries in flight";
    this.color = d3.rgb(ChartThemeColor.green);
    this.setStyle(this.color, 0.3);
    this.isRate = false;
    this.ariaLabel = "inflight-chart";
  }

labels={({ datum }) => (datum.x ? datum.x : null)}
            legendPosition="bottom"
            width={230}
          >
             (datum.x ? `${datum.x}: ${datum.y}%` : null)}
              legendData={[
                { name: `Storage capacity: ${used}%` },
                { name: 'Warning threshold at 60%' },
                { name: 'Danger threshold at 90%' }
              ]}
              legendOrientation="vertical"
              subTitle="of 100 GBps"
              title={`${used}%`}
              themeColor={ChartThemeColor.green}
              themeVariant={ChartThemeVariant.light}
              thresholds={[{ value: 60 }, { value: 90 }]}
            />
          
        
      
    );
  }
}