@patternfly/react-docs 7.6.0-prerelease.7 → 7.6.0-prerelease.8

package/patternfly-docs/generated/components/charts/colors-for-charts/-Victory.js

@@ -0,0 +1,192 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import {
+  Chart,
+  ChartArea,
+  ChartAxis,
+  ChartBar,
+  ChartDonut,
+  ChartGroup,
+  ChartLegend,
+  ChartLine,
+  ChartStack,
+  ChartThemeColor,
+  ChartThreshold,
+  ChartTooltip,
+  ChartVoronoiContainer,
+  getCustomTheme
+} from '@patternfly/react-charts/victory';
+import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300';
+import chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color_green_300';
+import chart_color_teal_300 from '@patternfly/react-tokens/dist/esm/chart_color_teal_300';
+import chart_color_yellow_300 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_300';
+import chart_color_purple_300 from '@patternfly/react-tokens/dist/esm/chart_color_purple_300';
+const pageData = {
+  "id": "Colors for charts",
+  "section": "components",
+  "subsection": "charts",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "-Victory",
+  "tabName": null,
+  "slug": "/components/charts/colors-for-charts/-Victory",
+  "sourceLink": "https://github.com/patternfly/patternfly-org/blob/main/packages/react-charts/src/victory/components/ChartTheme/examples/ChartTheme.md",
+  "relPath": "packages/react-charts/src/victory/components/ChartTheme/examples/ChartTheme.md",
+  "examples": [
+    "Green",
+    "Multi-color (ordered)",
+    "Multi color (unordered)",
+    "Custom color scale",
+    "Custom stroke color",
+    "Custom theme"
+  ]
+};
+pageData.liveContext = {
+  Chart,
+  ChartArea,
+  ChartAxis,
+  ChartBar,
+  ChartDonut,
+  ChartGroup,
+  ChartLegend,
+  ChartLine,
+  ChartStack,
+  ChartThemeColor,
+  ChartThreshold,
+  ChartTooltip,
+  ChartVoronoiContainer,
+  getCustomTheme,
+  chart_color_blue_300,
+  chart_color_green_300,
+  chart_color_teal_300,
+  chart_color_yellow_300,
+  chart_color_purple_300
+};
+pageData.examples = {
+  'Green': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Chart,\n  ChartAxis,\n  ChartGroup,\n  ChartLine,\n  ChartThemeColor,\n  ChartVoronoiContainer\n} from '@patternfly/react-charts/victory';\n\ninterface PetData {\n  name?: string;\n  symbol?: { type: string };\n  x?: string;\n  y?: number;\n}\n\nexport const ChartThemeGreen: React.FunctionComponent = () => {\n  const legendData: PetData[] = [\n    { name: 'Cats' },\n    { name: 'Dogs', symbol: { type: 'dash' } },\n    { name: 'Birds' },\n    { name: 'Mice' }\n  ];\n\n  const data1: PetData[] = [\n    { name: 'Cats', x: '2015', y: 1 },\n    { name: 'Cats', x: '2016', y: 2 },\n    { name: 'Cats', x: '2017', y: 5 },\n    { name: 'Cats', x: '2018', y: 3 }\n  ];\n\n  const data2: PetData[] = [\n    { name: 'Dogs', x: '2015', y: 2 },\n    { name: 'Dogs', x: '2016', y: 1 },\n    { name: 'Dogs', x: '2017', y: 7 },\n    { name: 'Dogs', x: '2018', y: 4 }\n  ];\n\n  const data3: PetData[] = [\n    { name: 'Birds', x: '2015', y: 3 },\n    { name: 'Birds', x: '2016', y: 4 },\n    { name: 'Birds', x: '2017', y: 9 },\n    { name: 'Birds', x: '2018', y: 5 }\n  ];\n\n  const data4: PetData[] = [\n    { name: 'Mice', x: '2015', y: 3 },\n    { name: 'Mice', x: '2016', y: 3 },\n    { name: 'Mice', x: '2017', y: 8 },\n    { name: 'Mice', x: '2018', y: 7 }\n  ];\n\n  return (\n    <div style={{ height: '275px', width: '450px' }}>\n      <Chart\n        ariaDesc=\"Average number of pets\"\n        ariaTitle=\"Line chart example\"\n        containerComponent={\n          <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />\n        }\n        legendData={legendData}\n        legendPosition=\"bottom\"\n        height={275}\n        maxDomain={{ y: 10 }}\n        minDomain={{ y: 0 }}\n        name=\"chart1\"\n        padding={{\n          bottom: 75, // Adjusted to accommodate legend\n          left: 50,\n          right: 50,\n          top: 50\n        }}\n        themeColor={ChartThemeColor.green}\n        width={450}\n      >\n        <ChartAxis tickValues={[2, 3, 4]} />\n        <ChartAxis dependentAxis showGrid tickValues={[2, 5, 8]} />\n        <ChartGroup>\n          <ChartLine data={data1} />\n          <ChartLine\n            data={data2}\n            style={{\n              data: {\n                strokeDasharray: '3,3'\n              }\n            }}\n          />\n          <ChartLine data={data3} />\n          <ChartLine data={data4} />\n        </ChartGroup>\n      </Chart>\n    </div>\n  );\n};\n","title":"Green","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`This demonstrates how to apply basic theme colors.`}
+      </p>
+    </Example>,
+  'Multi-color (ordered)': props => 
+    <Example {...pageData} {...props} {...{"code":"import { ChartDonut, ChartThemeColor } from '@patternfly/react-charts/victory';\n\ninterface PetData {\n  x?: string;\n  y?: number;\n  name?: string;\n}\n\nexport const ChartThemeMultiColorOrdered: React.FunctionComponent = () => {\n  const data: PetData[] = [\n    { x: 'Cats', y: 35 },\n    { x: 'Dogs', y: 55 },\n    { x: 'Birds', y: 10 }\n  ];\n\n  const legendData: PetData[] = [{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }];\n\n  return (\n    <div style={{ height: '230px', width: '350px' }}>\n      <ChartDonut\n        ariaDesc=\"Average number of pets\"\n        ariaTitle=\"Donut chart example\"\n        constrainToVisibleArea\n        data={data}\n        labels={({ datum }) => `${datum.x}: ${datum.y}%`}\n        legendData={legendData}\n        legendOrientation=\"vertical\"\n        legendPosition=\"right\"\n        name=\"chart2\"\n        padding={{\n          bottom: 20,\n          left: 20,\n          right: 140, // Adjusted to accommodate legend\n          top: 20\n        }}\n        subTitle=\"Pets\"\n        title=\"100\"\n        themeColor={ChartThemeColor.multiOrdered}\n        width={350}\n      />\n    </div>\n  );\n};\n","title":"Multi-color (ordered)","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`This demonstrates how to apply theme colors for ordered charts like bar, donut, pie, and stack.`}
+      </p>
+    </Example>,
+  'Multi color (unordered)': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Chart,\n  ChartArea,\n  ChartAxis,\n  ChartGroup,\n  ChartThemeColor,\n  ChartVoronoiContainer\n} from '@patternfly/react-charts/victory';\n\ninterface PetData {\n  x?: string;\n  y?: number;\n  name?: string;\n}\n\nexport const ChartThemeMultiColorUnordered: React.FunctionComponent = () => {\n  const data1: PetData[] = [\n    { name: 'Cats', x: '2015', y: 3 },\n    { name: 'Cats', x: '2016', y: 4 },\n    { name: 'Cats', x: '2017', y: 8 },\n    { name: 'Cats', x: '2018', y: 6 }\n  ];\n\n  const data2: PetData[] = [\n    { name: 'Dogs', x: '2015', y: 2 },\n    { name: 'Dogs', x: '2016', y: 3 },\n    { name: 'Dogs', x: '2017', y: 4 },\n    { name: 'Dogs', x: '2018', y: 5 },\n    { name: 'Dogs', x: '2019', y: 6 }\n  ];\n\n  const data3: PetData[] = [\n    { name: 'Birds', x: '2015', y: 1 },\n    { name: 'Birds', x: '2016', y: 2 },\n    { name: 'Birds', x: '2017', y: 3 },\n    { name: 'Birds', x: '2018', y: 2 },\n    { name: 'Birds', x: '2019', y: 4 }\n  ];\n\n  const legendData: PetData[] = [{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }];\n\n  return (\n    <div style={{ height: '200px', width: '800px' }}>\n      <Chart\n        ariaDesc=\"Average number of pets\"\n        ariaTitle=\"Area chart example\"\n        containerComponent={\n          <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />\n        }\n        legendData={legendData}\n        legendOrientation=\"vertical\"\n        legendPosition=\"right\"\n        height={200}\n        maxDomain={{ y: 9 }}\n        name=\"chart3\"\n        padding={{\n          bottom: 50,\n          left: 50,\n          right: 200, // Adjusted to accommodate legend\n          top: 50\n        }}\n        themeColor={ChartThemeColor.multiUnordered}\n        width={800}\n      >\n        <ChartAxis />\n        <ChartAxis dependentAxis showGrid />\n        <ChartGroup>\n          <ChartArea data={data1} interpolation=\"monotoneX\" />\n          <ChartArea data={data2} interpolation=\"monotoneX\" />\n          <ChartArea data={data3} interpolation=\"monotoneX\" />\n        </ChartGroup>\n      </Chart>\n    </div>\n  );\n};\n","title":"Multi color (unordered)","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`This demonstrates how to apply theme colors for unordered charts like area, line, and sparkline.`}
+      </p>
+    </Example>,
+  'Custom color scale': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Chart,\n  ChartAxis,\n  ChartBar,\n  ChartLegend,\n  ChartStack,\n  ChartThemeColor,\n  ChartTooltip\n} from '@patternfly/react-charts/victory';\nimport chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300';\nimport chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color_green_300';\nimport chart_color_yellow_300 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_300';\nimport chart_color_purple_300 from '@patternfly/react-tokens/dist/esm/chart_color_purple_300';\n\ninterface PetData {\n  name?: string;\n  symbol?: { fill: string };\n  x?: string;\n  y?: number;\n  label?: string;\n}\n\nexport const ChartThemeCustomColorScale: React.FunctionComponent = () => {\n  const data1: PetData[] = [\n    {\n      name: 'Cats',\n      symbol: { fill: chart_color_blue_300.var }\n    },\n    {\n      name: 'Dogs',\n      symbol: { fill: chart_color_yellow_300.var }\n    },\n    {\n      name: 'Birds',\n      symbol: { fill: chart_color_green_300.var }\n    },\n    {\n      name: 'Mice',\n      symbol: { fill: chart_color_purple_300.var }\n    }\n  ];\n\n  const data2: PetData[] = [\n    { name: 'Cats', x: '2015', y: 1, label: 'Cats: 1' },\n    { name: 'Cats', x: '2016', y: 2, label: 'Cats: 2' },\n    { name: 'Cats', x: '2017', y: 5, label: 'Cats: 5' },\n    { name: 'Cats', x: '2018', y: 3, label: 'Cats: 3' }\n  ];\n\n  const data3: PetData[] = [\n    { name: 'Dogs', x: '2015', y: 2, label: 'Dogs: 2' },\n    { name: 'Dogs', x: '2016', y: 1, label: 'Dogs: 1' },\n    { name: 'Dogs', x: '2017', y: 7, label: 'Dogs: 7' },\n    { name: 'Dogs', x: '2018', y: 4, label: 'Dogs: 4' }\n  ];\n\n  const data4: PetData[] = [\n    { name: 'Birds', x: '2015', y: 4, label: 'Birds: 4' },\n    { name: 'Birds', x: '2016', y: 4, label: 'Birds: 4' },\n    { name: 'Birds', x: '2017', y: 9, label: 'Birds: 9' },\n    { name: 'Birds', x: '2018', y: 7, label: 'Birds: 7' }\n  ];\n\n  const data5: PetData[] = [\n    { name: 'Mice', x: '2015', y: 3, label: 'Mice: 3' },\n    { name: 'Mice', x: '2016', y: 3, label: 'Mice: 3' },\n    { name: 'Mice', x: '2017', y: 8, label: 'Mice: 8' },\n    { name: 'Mice', x: '2018', y: 5, label: 'Mice: 5' }\n  ];\n\n  return (\n    <div style={{ height: '275px', width: '450px' }}>\n      <Chart\n        ariaDesc=\"Average number of pets\"\n        ariaTitle=\"Stack chart example\"\n        domainPadding={{ x: [30, 25] }}\n        legendComponent={<ChartLegend data={data1} />}\n        legendPosition=\"bottom-left\"\n        height={275}\n        name=\"chart4\"\n        padding={{\n          bottom: 75, // Adjusted to accommodate legend\n          left: 50,\n          right: 50,\n          top: 50\n        }}\n        themeColor={ChartThemeColor.multiOrdered}\n        width={450}\n      >\n        <ChartAxis />\n        <ChartAxis dependentAxis showGrid />\n        <ChartStack\n          horizontal\n          colorScale={[\n            chart_color_blue_300.var,\n            chart_color_yellow_300.var,\n            chart_color_green_300.var,\n            chart_color_purple_300.var\n          ]}\n        >\n          <ChartBar data={data2} labelComponent={<ChartTooltip constrainToVisibleArea />} />\n          <ChartBar data={data3} labelComponent={<ChartTooltip constrainToVisibleArea />} />\n          <ChartBar data={data4} labelComponent={<ChartTooltip constrainToVisibleArea />} />\n          <ChartBar data={data5} labelComponent={<ChartTooltip constrainToVisibleArea />} />\n        </ChartStack>\n      </Chart>\n    </div>\n  );\n};\n","title":"Custom color scale","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`This demonstrates an alternate way of applying a custom color scale and fill colors to individual charts.`}
+      </p>
+    </Example>,
+  'Custom stroke color': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Chart,\n  ChartAxis,\n  ChartGroup,\n  ChartLine,\n  ChartThemeColor,\n  ChartThreshold,\n  ChartVoronoiContainer\n} from '@patternfly/react-charts/victory';\nimport chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300';\n\ninterface PetData {\n  name?: string;\n  symbol?: { fill: string; type: string };\n  x?: string;\n  y?: number;\n}\n\nexport const ChartThemeCustomStrokeColor: React.FunctionComponent = () => {\n  const legendData: PetData[] = [\n    { name: 'Cats' },\n    { name: 'Birds' },\n    { name: 'Mice' },\n    { name: 'Cats Threshold', symbol: { fill: chart_color_blue_300.var, type: 'threshold' } }\n  ];\n\n  const data1: PetData[] = [\n    { name: 'Cats', x: '2015', y: 1 },\n    { name: 'Cats', x: '2016', y: 2 },\n    { name: 'Cats', x: '2017', y: 5 },\n    { name: 'Cats', x: '2018', y: 3 }\n  ];\n\n  const data2: PetData[] = [\n    { name: 'Birds', x: '2015', y: 3 },\n    { name: 'Birds', x: '2016', y: 4 },\n    { name: 'Birds', x: '2017', y: 9 },\n    { name: 'Birds', x: '2018', y: 5 }\n  ];\n\n  const data3: PetData[] = [\n    { name: 'Mice', x: '2015', y: 3 },\n    { name: 'Mice', x: '2016', y: 3 },\n    { name: 'Mice', x: '2017', y: 8 },\n    { name: 'Mice', x: '2018', y: 7 }\n  ];\n\n  const data4: PetData[] = [\n    { name: 'Cats Threshold', x: '2015', y: 5 },\n    { name: 'Cats Threshold', x: '2016', y: 5 },\n    { name: 'Cats Threshold', x: '2016', y: 6 },\n    { name: 'Cats Threshold', x: '2017', y: 6 },\n    { name: 'Cats Threshold', x: '2018', y: 6 }\n  ];\n\n  return (\n    <div style={{ height: '275px', width: '450px' }}>\n      <Chart\n        ariaDesc=\"Average number of pets\"\n        ariaTitle=\"Line chart example\"\n        containerComponent={\n          <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />\n        }\n        legendData={legendData}\n        legendPosition=\"bottom\"\n        height={275}\n        maxDomain={{ y: 10 }}\n        minDomain={{ y: 0 }}\n        name=\"chart5\"\n        padding={{\n          bottom: 75, // Adjusted to accommodate legend\n          left: 50,\n          right: 50,\n          top: 50\n        }}\n        themeColor={ChartThemeColor.multiUnordered}\n        width={450}\n      >\n        <ChartAxis tickValues={[2, 3, 4]} />\n        <ChartAxis dependentAxis showGrid tickValues={[2, 5, 8]} />\n        <ChartGroup>\n          <ChartLine data={data1} />\n          <ChartLine data={data2} />\n          <ChartLine data={data3} />\n          <ChartThreshold\n            data={data4}\n            style={{\n              data: {\n                stroke: chart_color_blue_300.var\n              }\n            }}\n          />\n        </ChartGroup>\n      </Chart>\n    </div>\n  );\n};\n","title":"Custom stroke color","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`This demonstrates an alternate way of applying custom stroke and fill colors to a threshold chart.`}
+      </p>
+    </Example>,
+  'Custom theme': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Chart,\n  ChartBar,\n  ChartAxis,\n  ChartGroup,\n  ChartThemeColor,\n  ChartVoronoiContainer,\n  getCustomTheme\n} from '@patternfly/react-charts/victory';\nimport chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300';\nimport chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color_green_300';\nimport chart_color_teal_300 from '@patternfly/react-tokens/dist/esm/chart_color_teal_300';\nimport chart_color_yellow_300 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_300';\n\ninterface PetData {\n  name?: string;\n  x?: string;\n  y?: number;\n}\n\nexport const ChartThemeCustomTheme: React.FunctionComponent = () => {\n  const colorScale = [\n    chart_color_blue_300.var,\n    chart_color_green_300.var,\n    chart_color_teal_300.var,\n    chart_color_yellow_300.var\n  ];\n\n  const layoutProps = {\n    padding: {\n      bottom: 50,\n      left: 50,\n      right: 200, // Adjusted to accommodate legend\n      top: 50\n    }\n  };\n\n  // Victory theme properties only\n  const themeProps = {\n    bar: {\n      colorScale,\n      ...layoutProps\n    },\n    chart: {\n      colorScale,\n      ...layoutProps\n    },\n    group: {\n      colorScale,\n      ...layoutProps\n    },\n    legend: {\n      colorScale\n    }\n  };\n\n  // Applies theme color and variant to base theme\n  const myCustomTheme = getCustomTheme(ChartThemeColor.default, themeProps);\n\n  const legendData: PetData[] = [{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }];\n\n  const data1: PetData[] = [\n    { name: 'Cats', x: '2015', y: 1 },\n    { name: 'Cats', x: '2016', y: 2 },\n    { name: 'Cats', x: '2017', y: 5 },\n    { name: 'Cats', x: '2018', y: 3 }\n  ];\n\n  const data2: PetData[] = [\n    { name: 'Dogs', x: '2015', y: 2 },\n    { name: 'Dogs', x: '2016', y: 1 },\n    { name: 'Dogs', x: '2017', y: 7 },\n    { name: 'Dogs', x: '2018', y: 4 }\n  ];\n\n  const data3: PetData[] = [\n    { name: 'Birds', x: '2015', y: 4 },\n    { name: 'Birds', x: '2016', y: 4 },\n    { name: 'Birds', x: '2017', y: 9 },\n    { name: 'Birds', x: '2018', y: 7 }\n  ];\n\n  const data4: PetData[] = [\n    { name: 'Mice', x: '2015', y: 3 },\n    { name: 'Mice', x: '2016', y: 3 },\n    { name: 'Mice', x: '2017', y: 8 },\n    { name: 'Mice', x: '2018', y: 5 }\n  ];\n\n  return (\n    <div style={{ height: '250px', width: '600px' }}>\n      <Chart\n        ariaDesc=\"Average number of pets\"\n        ariaTitle=\"Bar chart example\"\n        containerComponent={\n          <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />\n        }\n        domain={{ y: [0, 9] }}\n        domainPadding={{ x: [30, 25] }}\n        legendData={legendData}\n        legendOrientation=\"vertical\"\n        legendPosition=\"right\"\n        height={250}\n        name=\"chart6\"\n        theme={myCustomTheme}\n        width={600}\n      >\n        <ChartAxis />\n        <ChartAxis dependentAxis showGrid />\n        <ChartGroup offset={11}>\n          <ChartBar data={data1} />\n          <ChartBar data={data2} />\n          <ChartBar data={data3} />\n          <ChartBar data={data4} />\n        </ChartGroup>\n      </Chart>\n    </div>\n  );\n};\n","title":"Custom theme","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`This demonstrates custom theme properties, which may be applied across multiple charts.`}
+      </p>
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"introduction","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Introduction`}
+    </AutoLinkHeader>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`Note: PatternFly React charts live in its own package at `}
+      <PatternflyThemeLink {...{"to":"https://www.npmjs.com/package/@patternfly/react-charts","className":""}}>
+        {`@patternfly/react-charts`}
+      </PatternflyThemeLink>
+      {`!`}
+    </p>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`The examples below are based on the `}
+      <PatternflyThemeLink {...{"to":"https://formidable.com/open-source/victory/docs/victory-chart/","className":""}}>
+        {`Victory`}
+      </PatternflyThemeLink>
+      {` chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior.`}
+    </p>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Green"])}
+    {React.createElement(pageData.examples["Multi-color (ordered)"])}
+    {React.createElement(pageData.examples["Multi color (unordered)"])}
+    {React.createElement(pageData.examples["Custom color scale"])}
+    {React.createElement(pageData.examples["Custom stroke color"])}
+    {React.createElement(pageData.examples["Custom theme"])}
+    <AutoLinkHeader {...{"id":"documentation","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Documentation`}
+    </AutoLinkHeader>
+    <AutoLinkHeader {...{"id":"tips","headingLevel":"h3","className":"ws-title ws-h3"}}>
+      {`Tips`}
+    </AutoLinkHeader>
+    <ul {...{"className":"pf-v6-c-content--ul pf-m-editorial ws-ul "}}>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+        {`See Victory's `}
+        <PatternflyThemeLink {...{"to":"https://formidable.com/open-source/victory/docs/faq","className":""}}>
+          {`FAQ`}
+        </PatternflyThemeLink>
+      </li>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+        {`The `}
+        <code {...{"className":"ws-code "}}>
+          {`theme`}
+        </code>
+        {` and `}
+        <code {...{"className":"ws-code "}}>
+          {`themeColor`}
+        </code>
+        {` props should be applied at the most top level component`}
+      </li>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+        {`Use `}
+        <code {...{"className":"ws-code "}}>
+          {`ChartGroup`}
+        </code>
+        {` to apply theme color scales and other properties to multiple components`}
+      </li>
+    </ul>
+    <AutoLinkHeader {...{"id":"note","headingLevel":"h3","className":"ws-title ws-h3"}}>
+      {`Note`}
+    </AutoLinkHeader>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`Currently, the generated documentation below is not able to resolve type definitions from Victory imports. For the components used in the examples above, Victory pass-thru props are also documented here:`}
+    </p>
+    <ul {...{"className":"pf-v6-c-content--ul pf-m-editorial ws-ul "}}>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+        {`For theme props, see `}
+        <PatternflyThemeLink {...{"to":"https://formidable.com/open-source/victory/docs/victory-theme","className":""}}>
+          {`VictoryTheme`}
+        </PatternflyThemeLink>
+      </li>
+    </ul>
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsChartsColorsForCharts-VictoryDocs';
+Component.pageData = pageData;
+
+export default Component;