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

containerComponent={}
            legendData={[
              { name: 'Cats' },
              { name: 'Dogs', symbol: { type: 'dash' } },
              { name: 'Birds' },
              { name: 'Mice' }
            ]}
            legendPosition="bottom"
            height={275}
            padding={{
              bottom: 75, // Adjusted to accommodate legend
              left: 50,
              right: 50,
              top: 50
            }}
            themeColor={ChartThemeColor.multi}
            width={450}
          >

render() {
    return (
      <div>
        <div style="{{">
          
            
            
            
              
              </div></div>

return (
      <div>
        <div style="{{">
          
            
            
            
              
              </div></div>

scale={{ x: 'time' }}
          >
             twentyFourHourTime(x)}
              style={{ tickLabels: { fontSize: 8, padding: 5 } }}
            />
            
            {chartLineList}
          
          
        
      );
    }
    return ;

render() {
    return (
      <div style="{{">
        <div>
           `${datum.x}: ${datum.y}`}
            legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]}
            legendPosition="bottom"
            themeColor={ChartThemeColor.multi}
            width={300}
          /&gt;
        </div>
      </div>
    );
  }
}

render() {
    if (this.props.metrics && this.props.metrics.length > 0) {
      const data = graphUtils.toVCLines(this.props.metrics);

      return (
        <div>
          {'Traffic, ' + getName(this.props.duration).toLowerCase()}
          <div>
            
              {data.series.map((serie, idx) =&gt; (
                
              ))}
               ''} /&gt;
               ''} /&gt;
            
          </div>
        </div>
      );
    }
    return <div style="{{">No traffic</div>;
  }
}

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

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