How to use the @patternfly/react-charts.ChartThemeVariant.light function in @patternfly/react-charts

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}
          />
        
      
    );
  }
}

render() {
    return (
      <div>
        <div style="{{">
           `${datum.x}: ${datum.y}%`}
            legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]}
            legendOrientation="vertical"
            legendPosition="right"
            subTitle="Pets"
            title="100"
            themeColor={ChartThemeColor.multi}
            themeVariant={ChartThemeVariant.light}
            width={350}
          /&gt;
        </div>
      </div>
    );
  }
}

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 }]}
            />
          
        
      
    );
  }
}

}
  const totalHumanized = humanizeBinaryBytesWithoutB(totalUsage, null, totalUsage ? null : 'MiB');
  return (
    <div>
      <div>
         `${datum.x}: ${humanizePercentage(totalUsage ? datum.y : 0).string}`}
          themeColor={ChartThemeColor.multi}
          themeVariant={ChartThemeVariant.light}
          title={totalHumanized.string}
        /&gt;
      </div>
    </div>
  );
};