diff --git a/packages/react-charts/src/victory/components/ChartScatter/examples/ChartScatter.md b/packages/react-charts/src/victory/components/ChartScatter/examples/ChartScatter.md
index 78afbc3459a..90400d6c9a4 100644
--- a/packages/react-charts/src/victory/components/ChartScatter/examples/ChartScatter.md
+++ b/packages/react-charts/src/victory/components/ChartScatter/examples/ChartScatter.md
@@ -13,7 +13,6 @@ propComponents: [
hideDarkMode: true
---
-import { createRef } from 'react';
import {
Chart,
ChartArea,
@@ -25,6 +24,7 @@ ChartThemeColor,
ChartVoronoiContainer,
} from '@patternfly/react-charts/victory';
import { getResizeObserver } from '@patternfly/react-core';
+import { useEffect, useRef, useState } from 'react';
## Introduction
Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)!
@@ -33,296 +33,24 @@ The examples below are based on the [Victory](https://formidable.com/open-source
## Examples
### Basic
-```js
-import { Chart, ChartAxis, ChartGroup, ChartScatter, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
+```ts file = "ChartScatterBasic.tsx"
-
- `${datum.name}: ${datum.y}`}
- constrainToVisibleArea
- />
- }
- height={275}
- maxDomain={{y: 8}}
- minDomain={{y: 0}}
- name="chart1"
- width={450}
- >
-
-
-
-
-
-
-
```
### Line chart
This demonstrates how to add interactive data points to a line chart.
-```js
-import { Chart, ChartAxis, ChartGroup, ChartLine, ChartScatter, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
-import { getResizeObserver } from '@patternfly/react-core';
-
-class ScatterLineChart extends React.Component {
- constructor(props) {
- super(props);
- this.containerRef = createRef();
- this.observer = () => {};
- this.state = {
- width: 0
- };
- this.handleResize = () => {
- if (this.containerRef.current && this.containerRef.current.clientWidth) {
- this.setState({ width: this.containerRef.current.clientWidth });
- }
- };
-
- this.series = [
- {
- datapoints: [
- { name: 'Cats', x: '2015', y: 1 },
- { name: 'Cats', x: '2016', y: 2 },
- { name: 'Cats', x: '2017', y: 5 },
- { name: 'Cats', x: '2018', y: 3 }
- ],
- legendItem: { name: 'Cats' }
- },
- {
- datapoints: [
- { name: 'Dogs', x: '2015', y: 2 },
- { name: 'Dogs', x: '2016', y: 1 },
- { name: 'Dogs', x: '2017', y: 7 },
- { name: 'Dogs', x: '2018', y: 4 }
- ],
- legendItem: { name: 'Dogs' },
- style: {
- data: {
- strokeDasharray: '3,3'
- }
- }
- },
- {
- datapoints: [
- { name: 'Birds', x: '2015', y: 3 },
- { name: 'Birds', x: '2016', y: 4 },
- { name: 'Birds', x: '2017', y: 9 },
- { name: 'Birds', x: '2018', y: 5 }
- ],
- legendItem: { name: 'Birds' }
- },
- {
- datapoints: [
- { name: 'Mice', x: '2015', y: 3 },
- { name: 'Mice', x: '2016', y: 3 },
- { name: 'Mice', x: '2017', y: 8 },
- { name: 'Mice', x: '2018', y: 7 }
- ],
- legendItem: { name: 'Mice' }
- }];
- }
-
- componentDidMount() {
- this.observer = getResizeObserver(this.containerRef.current, this.handleResize);
- this.handleResize();
- }
-
- componentWillUnmount() {
- this.observer();
- }
-
- render() {
- const { width } = this.state;
+```ts file = "ChartScatterLineChart.tsx"
- return (
-
-
- datum.childName.includes('line-') ? `${datum.name}: ${datum.y}` : null}
- constrainToVisibleArea
- />
- }
- legendData={this.series.map(s => s.legendItem)}
- legendPosition="bottom-left"
- height={275}
- maxDomain={{y: 10}}
- minDomain={{y: 0}}
- name="chart2"
- padding={{
- bottom: 75, // Adjusted to accommodate legend
- left: 50,
- right: 50,
- top: 50
- }}
- themeColor={ChartThemeColor.orange}
- width={width}
- >
-
-
-
- {this.series.map((s, idx) => {
- return (
-
- );
- })}
-
-
- {this.series.map((s, idx) => {
- return (
-
- );
- })}
-
-
-
-
-
- datum.childName.includes('area-') ? `${datum.name}: ${datum.y}` : null}
- constrainToVisibleArea
- />
- }
- height={225}
- legendData={this.series.map(s => s.legendItem)}
- legendPosition="bottom-left"
- name="chart3"
- padding={{
- bottom: 75, // Adjusted to accommodate legend
- left: 50,
- right: 50,
- top: 50,
- }}
- maxDomain={{y: 9}}
- themeColor={ChartThemeColor.multiUnordered}
- width={width}
- >
-
-
-
- {this.series.map((s, idx) => {
- return (
-
- );
- })}
-
-
- {this.series.map((s, idx) => {
- return (
-
- );
- })}
-
-
-
-
+
+ (datum.childName.includes('area-') ? `${datum.name}: ${datum.y}` : null)}
+ constrainToVisibleArea
+ />
+ }
+ height={225}
+ legendData={series.map((s) => s.legendItem)}
+ legendPosition="bottom-left"
+ name="chart3"
+ padding={{
+ bottom: 75, // Adjusted to accommodate legend
+ left: 50,
+ right: 50,
+ top: 50
+ }}
+ maxDomain={{ y: 9 }}
+ themeColor={ChartThemeColor.multiUnordered}
+ width={width}
+ >
+
+
+
+ {series.map((s, idx) => (
+
+ ))}
+
+
+ {series.map((s, idx) => (
+
+ ))}
+
+
+
+
+ `${datum.name}: ${datum.y}`} constrainToVisibleArea />
+ }
+ height={275}
+ maxDomain={{ y: 8 }}
+ minDomain={{ y: 0 }}
+ name="chart1"
+ width={450}
+ >
+
+
+
+
+
+
+
+ );
+};
diff --git a/packages/react-charts/src/victory/components/ChartScatter/examples/ChartScatterLineChart.tsx b/packages/react-charts/src/victory/components/ChartScatter/examples/ChartScatterLineChart.tsx
new file mode 100644
index 00000000000..7466aa240d8
--- /dev/null
+++ b/packages/react-charts/src/victory/components/ChartScatter/examples/ChartScatterLineChart.tsx
@@ -0,0 +1,119 @@
+import {
+ Chart,
+ ChartAxis,
+ ChartGroup,
+ ChartLine,
+ ChartScatter,
+ ChartThemeColor,
+ ChartVoronoiContainer
+} from '@patternfly/react-charts/victory';
+import { getResizeObserver } from '@patternfly/react-core';
+import { useEffect, useRef, useState } from 'react';
+
+export const ChartScatterLineChart: React.FunctionComponent = () => {
+ const containerRef = useRef(null);
+ const observer = useRef(() => {});
+ const [width, setWidth] = useState(0);
+
+ const handleResize = () => {
+ if (containerRef.current && containerRef.current.clientWidth) {
+ setWidth(containerRef.current.clientWidth);
+ }
+ };
+ const series = [
+ {
+ datapoints: [
+ { name: 'Cats', x: '2015', y: 1 },
+ { name: 'Cats', x: '2016', y: 2 },
+ { name: 'Cats', x: '2017', y: 5 },
+ { name: 'Cats', x: '2018', y: 3 }
+ ],
+ legendItem: { name: 'Cats' }
+ },
+ {
+ datapoints: [
+ { name: 'Dogs', x: '2015', y: 2 },
+ { name: 'Dogs', x: '2016', y: 1 },
+ { name: 'Dogs', x: '2017', y: 7 },
+ { name: 'Dogs', x: '2018', y: 4 }
+ ],
+ legendItem: { name: 'Dogs' },
+ style: {
+ data: {
+ strokeDasharray: '3,3'
+ }
+ }
+ },
+ {
+ datapoints: [
+ { name: 'Birds', x: '2015', y: 3 },
+ { name: 'Birds', x: '2016', y: 4 },
+ { name: 'Birds', x: '2017', y: 9 },
+ { name: 'Birds', x: '2018', y: 5 }
+ ],
+ legendItem: { name: 'Birds' }
+ },
+ {
+ datapoints: [
+ { name: 'Mice', x: '2015', y: 3 },
+ { name: 'Mice', x: '2016', y: 3 },
+ { name: 'Mice', x: '2017', y: 8 },
+ { name: 'Mice', x: '2018', y: 7 }
+ ],
+ legendItem: { name: 'Mice' }
+ }
+ ];
+
+ useEffect(() => {
+ observer.current = getResizeObserver(containerRef.current, handleResize);
+ handleResize();
+
+ return () => {
+ observer.current();
+ };
+ }, []);
+
+ return (
+
+
+ (datum.childName.includes('line-') ? `${datum.name}: ${datum.y}` : null)}
+ constrainToVisibleArea
+ />
+ }
+ legendData={series.map((s) => s.legendItem)}
+ legendPosition="bottom-left"
+ height={275}
+ maxDomain={{ y: 10 }}
+ minDomain={{ y: 0 }}
+ name="chart2"
+ padding={{
+ bottom: 75, // Adjusted to accommodate legend
+ left: 50,
+ right: 50,
+ top: 50
+ }}
+ themeColor={ChartThemeColor.orange}
+ width={width}
+ >
+
+
+
+ {series.map((s, idx) => (
+
+ ))}
+
+
+ {series.map((s, idx) => (
+
+ ))}
+
+
+
+