How to use @patternfly/react-charts - 10 common examples

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

import { Dropdown, humanizeNumberSI, LoadingInline, usePoll, useRefWidth, useSafeFetch } from '../utils';
import {
  formatPrometheusDuration,
  parsePrometheusDuration,
  twentyFourHourTime,
  twentyFourHourTimeWithSeconds,
} from '../utils/datetime';
import { withFallback } from '../utils/error-boundary';
import { PrometheusResponse } from '../graphs';
import { GraphEmpty } from '../graphs/graph-empty';
import { getPrometheusURL, PrometheusEndpoint } from '../graphs/helpers';
import { queryBrowserTheme } from '../graphs/themes';

const spans = ['5m', '15m', '30m', '1h', '2h', '6h', '12h', '1d', '2d', '1w', '2w'];
const dropdownItems = _.zipObject(spans, spans);
const chartTheme = getCustomTheme(ChartThemeColor.multi, ChartThemeVariant.light, queryBrowserTheme);
export const colors = chartTheme.line.colorScale;

// Use exponential notation for small or very large numbers to avoid labels with too many characters
const formatPositiveValue = (v: number): string => v === 0 || (0.001 <= v && v < 1e23)
  ? humanizeNumberSI(v).string
  : v.toExponential(1);
const formatValue = (v: number): string => (v < 0 ? '-' : '') + formatPositiveValue(Math.abs(v));

export const Error = ({error, title = 'An error occurred'}) =>
  
    {_.get(error, 'json.error', error.message)}
  ;

const GraphEmptyState = ({children, title}) =&gt; <div>
  
    </div>

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

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

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

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

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

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