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

export const BarChart: React.FC = ({
  barWidth = DEFAULT_BAR_WIDTH,
  title,
  query,
  data = [],
  theme = getCustomTheme(ChartThemeColor.blue, ChartThemeVariant.light, barTheme),
  titleClassName,
  loading = false,
  LabelComponent,
}) => {
  const [containerRef, width] = useRefWidth();

  // Max space that horizontal padding should take up. By default, 2/3 of the horizontal space is always available for the actual bar graph.
  const maxHorizontalPadding = PADDING_RATIO * width;

  const padding = {
    bottom: 15,
    left: 0,
    right: Math.min(100, maxHorizontalPadding),
    top: 0,
  };

export const AreaChart: React.FC = ({
  className,
  data,
  formatDate = twentyFourHourTime,
  height = DEFAULT_HEIGHT,
  humanize = humanizeNumber,
  loading = true,
  padding,
  query,
  theme = getCustomTheme(ChartThemeColor.blue, ChartThemeVariant.light, areaTheme),
  tickCount = DEFAULT_TICK_COUNT,
  title,
  xAxis = true,
  yAxis = true,
}) => {
  const [containerRef, width] = useRefWidth();
  const getLabel = ({ datum: { x, y }}) => `${humanize(y).string} at ${formatDate(x)}`;
  const container = ;
  return (
    
      {data.length ? (