diff --git a/packages/react-charts/.gitignore b/packages/react-charts/.gitignore
new file mode 100644
index 00000000000..a37bdb9af90
--- /dev/null
+++ b/packages/react-charts/.gitignore
@@ -0,0 +1,2 @@
+/next
+/components
diff --git a/packages/react-charts/package.json b/packages/react-charts/package.json
index 222b9240fe8..b94952204dd 100644
--- a/packages/react-charts/package.json
+++ b/packages/react-charts/package.json
@@ -5,6 +5,13 @@
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "next": [
+        "dist/esm/next/index.d.ts"
+      ]
+    }
+  },
   "patternfly:src": "src/",
   "sideEffects": [
     "*.css",
@@ -53,14 +60,17 @@
     "victory-zoom-container": "^37.0.2"
   },
   "peerDependencies": {
+    "echarts": "^5.5.1",
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
   "scripts": {
-    "clean": "rimraf dist",
-    "build:single:packages": "node ../../scripts/build-single-packages.mjs --config single-packages.config.json"
+    "clean": "rimraf dist components next",
+    "build:single:packages": "node ../../scripts/build-single-packages.mjs --config single-packages.config.json",
+    "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "devDependencies": {
+    "@types/echarts": "^4.9.22",
     "@types/lodash": "^4.17.7",
     "fs-extra": "^11.2.0"
   }
diff --git a/packages/react-charts/single-packages.config.json b/packages/react-charts/single-packages.config.json
index 4a9651bb17d..8b418fd2095 100644
--- a/packages/react-charts/single-packages.config.json
+++ b/packages/react-charts/single-packages.config.json
@@ -1,4 +1,4 @@
 {
   "packageName": "@patternfly/react-charts",
-  "exclude": ["dist/esm/deprecated/index.js", "dist/esm/next/index.js"]
+  "exclude": ["dist/esm/deprecated/index.js"]
 }
diff --git a/packages/react-charts/src/next/components/Sankey/Sankey.test.tsx b/packages/react-charts/src/next/components/Sankey/Sankey.test.tsx
new file mode 100644
index 00000000000..ff3418f6d94
--- /dev/null
+++ b/packages/react-charts/src/next/components/Sankey/Sankey.test.tsx
@@ -0,0 +1,83 @@
+import * as React from 'react';
+// import * as echarts from 'echarts';
+import { render } from '@testing-library/react';
+import { Sankey } from './Sankey';
+
+const data = [
+  {
+    name: 'a'
+  },
+  {
+    name: 'b'
+  },
+  {
+    name: 'a1'
+  },
+  {
+    name: 'a2'
+  },
+  {
+    name: 'b1'
+  },
+  {
+    name: 'c'
+  }
+];
+
+const links = [
+  {
+    source: 'a',
+    target: 'a1',
+    value: 5
+  },
+  {
+    source: 'a',
+    target: 'a2',
+    value: 3
+  },
+  {
+    source: 'b',
+    target: 'b1',
+    value: 8
+  },
+  {
+    source: 'a',
+    target: 'b1',
+    value: 3
+  },
+  {
+    source: 'b1',
+    target: 'a1',
+    value: 1
+  },
+  {
+    source: 'b1',
+    target: 'c',
+    value: 2
+  }
+];
+
+let spy: any;
+
+// beforeAll(() => {
+//   console.log(`*** TEST 1`);
+//   spy = jest.spyOn(echarts, 'getInstanceByDom').mockImplementation(
+//     () =>
+//       ({
+//         hideLoading: jest.fn(),
+//         setOption: jest.fn(),
+//         showLoading: jest.fn()
+//       }) as any
+//   );
+// });
+//
+// afterAll(() => {
+//   console.log(`*** TEST 2`);
+//   spy.mockRestore();
+// });
+
+// See https://stackoverflow.com/questions/54921743/testing-echarts-react-component-with-jest-echartelement-is-null
+xtest('renders component data', () => {
+  const { asFragment } = render(<Sankey opts={{ renderer: 'svg' }} series={[{ data, links }]} />);
+  expect(asFragment()).toMatchSnapshot();
+});
diff --git a/packages/react-charts/src/next/components/Sankey/Sankey.tsx b/packages/react-charts/src/next/components/Sankey/Sankey.tsx
new file mode 100644
index 00000000000..c7d1f33b7fc
--- /dev/null
+++ b/packages/react-charts/src/next/components/Sankey/Sankey.tsx
@@ -0,0 +1,169 @@
+/* eslint-disable camelcase */
+import chart_voronoi_flyout_stroke_Fill from '@patternfly/react-tokens/dist/esm/chart_voronoi_flyout_stroke_Fill';
+import chart_voronoi_labels_Fill from '@patternfly/react-tokens/dist/esm/chart_voronoi_labels_Fill';
+
+import * as React from 'react';
+import * as echarts from 'echarts';
+import { useRef } from 'react';
+import defaultsDeep from 'lodash/defaultsDeep';
+
+// import { BarChart, SankeyChart } from 'echarts/charts';
+// import { CanvasRenderer } from 'echarts/renderers';
+
+// import {
+//   TitleComponent,
+//   TooltipComponent,
+//   GridComponent,
+//   DatasetComponent,
+//   TransformComponent
+// } from 'echarts/components';
+
+// Register the required components
+// echarts.use([
+//   BarChart,
+//   SankeyChart,
+//   TitleComponent,
+//   TooltipComponent,
+//   GridComponent,
+//   DatasetComponent,
+//   TransformComponent,
+//   LabelLayout,
+//   UniversalTransition,
+//   CanvasRenderer
+// ]);
+
+import { theme as chartTheme } from './theme';
+
+/**
+ */
+export interface SankeyProps {
+  destinationLabel?: string;
+  height?: number;
+  id?: string;
+  legend?: {
+    symbolSize?: number; // Todo: move into tooltip?
+  };
+  lineStyle?: any;
+  opts?: any;
+  series: any[];
+  sourceLabel?: string;
+  theme?: any;
+  title?: any;
+  tooltip?: any;
+  width?: number;
+}
+
+export const Sankey: React.FunctionComponent<SankeyProps> = ({
+  destinationLabel = 'Destination',
+  height,
+  id,
+  legend = {
+    symbolSize: 10
+  },
+  lineStyle = {
+    color: 'source',
+    opacity: 0.6
+  },
+  opts,
+  series,
+  sourceLabel = 'Source',
+  theme = chartTheme,
+  title,
+  tooltip = {
+    valueFormatter: (value: number | string) => value
+  },
+  width
+}: SankeyProps) => {
+  const containerRef = useRef<HTMLDivElement>();
+  const echart = useRef<echarts.ECharts>();
+
+  const getItemColor = (params: any) => {
+    const serie = series[params.seriesIndex];
+    const sourceData = serie?.data.find((datum: any) => datum.name === params.data?.source);
+    const targetData = serie?.data.find((datum: any) => datum.name === params.data?.target);
+    const sourceColor = sourceData?.itemStyle?.color;
+    const targetColor = targetData?.itemStyle?.color;
+    return { sourceColor, targetColor };
+  };
+
+  const getTooltip = () => {
+    const symbolSize = `${legend.symbolSize}px`;
+    const defaults = {
+      backgroundColor: chart_voronoi_flyout_stroke_Fill.value,
+      confine: true,
+      formatter: (params: any) => {
+        const result = `
+          <div style="display: inline-block; background-color: ${params.color}; height: ${symbolSize}; width: ${symbolSize};"></div>
+          ${params.name} ${params.value}
+        `;
+        if (params.data.source && params.data.target) {
+          const { sourceColor, targetColor } = getItemColor(params);
+          return `
+            <p>${sourceLabel}</p>
+            <div style="display: inline-block; background-color: ${sourceColor}; height: ${symbolSize}; width: ${symbolSize};"></div>
+            ${params.data.source}
+            <p style="padding-top: 10px;">${destinationLabel}</p>
+            <p style="text-align:left;">
+              <div style="display: inline-block; background-color: ${targetColor}; height: ${symbolSize}; width: ${symbolSize};"></div>
+              ${params.data.target}
+              <strong style="float:right;">
+                ${tooltip.valueFormatter(params.value, params.dataIndex)}
+              </strong>
+            </p>
+          `;
+        }
+        return result.replace(/\s\s+/g, ' ');
+      },
+      textStyle: {
+        color: chart_voronoi_labels_Fill.value
+      },
+      trigger: 'item',
+      triggerOn: 'mousemove'
+    };
+    return defaultsDeep(tooltip, defaults);
+  };
+
+  React.useEffect(() => {
+    echarts.registerTheme('pf-v5-sankey', theme);
+    echart.current = echarts.init(containerRef.current, 'pf-v5-sankey', opts); // renderer: 'svg'
+
+    const newSeries = series.map((serie: any) => {
+      const defaults = {
+        data: serie.data.map((datum: any, index: number) => ({
+          itemStyle: {
+            color: theme?.color[index % theme?.color.length]
+          }
+        })),
+        emphasis: {
+          focus: 'adjacency'
+        },
+        layout: 'none',
+        lineStyle,
+        type: 'sankey'
+      };
+      return defaultsDeep(serie, defaults);
+    });
+
+    echart.current?.setOption({
+      series: newSeries,
+      title,
+      tooltip: getTooltip()
+    });
+
+    return () => {
+      echart.current?.dispose();
+    };
+  }, [containerRef, lineStyle, opts, series, title, tooltip]);
+
+  React.useEffect(() => {
+    echart.current?.resize();
+  }, [height, width]);
+
+  const getSize = () => ({
+    ...(height && { height: `${height}px` }),
+    ...(width && { width: `${width}px` })
+  });
+
+  return <div id={id} ref={containerRef} style={getSize()} />;
+};
+Sankey.displayName = 'Sankey';
diff --git a/packages/react-charts/src/next/components/Sankey/examples/Basic.tsx b/packages/react-charts/src/next/components/Sankey/examples/Basic.tsx
new file mode 100644
index 00000000000..e72949e9f98
--- /dev/null
+++ b/packages/react-charts/src/next/components/Sankey/examples/Basic.tsx
@@ -0,0 +1,94 @@
+import React from 'react';
+import { Sankey } from '@patternfly/react-charts/next';
+import { getResizeObserver } from '@patternfly/react-core';
+
+export const FormBasic: React.FunctionComponent = () => {
+  const data = [
+    {
+      name: 'a'
+    },
+    {
+      name: 'b'
+    },
+    {
+      name: 'a1'
+    },
+    {
+      name: 'a2'
+    },
+    {
+      name: 'b1'
+    },
+    {
+      name: 'c'
+    }
+  ];
+
+  const links = [
+    {
+      source: 'a',
+      target: 'a1',
+      value: 5
+    },
+    {
+      source: 'a',
+      target: 'a2',
+      value: 3
+    },
+    {
+      source: 'b',
+      target: 'b1',
+      value: 8
+    },
+    {
+      source: 'a',
+      target: 'b1',
+      value: 3
+    },
+    {
+      source: 'b1',
+      target: 'a1',
+      value: 1
+    },
+    {
+      source: 'b1',
+      target: 'c',
+      value: 2
+    }
+  ];
+
+  // let observer = () => {};
+  const containerRef = React.useRef<HTMLDivElement>();
+  const [width, setWidth] = React.useState(0);
+
+  React.useEffect(() => {
+    const handleResize = () => {
+      if (containerRef.current && containerRef.current.clientWidth) {
+        setWidth(containerRef.current.clientWidth);
+      }
+    };
+    let observer = () => {};
+    observer = getResizeObserver(containerRef.current, handleResize);
+
+    return () => {
+      observer();
+    };
+  }, [containerRef, width]);
+
+  return (
+    <div ref={containerRef}>
+      <Sankey
+        height={400}
+        series={[{ data, links }]}
+        title={{
+          subtext: 'This is a Sankey chart',
+          left: 'center'
+        }}
+        tooltip={{
+          valueFormatter: (value) => `${value} GiB`
+        }}
+        width={width}
+      />
+    </div>
+  );
+};
diff --git a/packages/react-charts/src/next/components/Sankey/examples/Sankey.md b/packages/react-charts/src/next/components/Sankey/examples/Sankey.md
new file mode 100644
index 00000000000..4dd21fcf130
--- /dev/null
+++ b/packages/react-charts/src/next/components/Sankey/examples/Sankey.md
@@ -0,0 +1,23 @@
+---
+id: Sankey
+section: charts
+propComponents: [
+  'Sankey',
+]
+hideDarkMode: true
+beta: true
+---
+
+import { Sankey } from '@patternfly/react-charts/next';
+
+## Introduction
+Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)!
+
+PatternFly React charts are based on the [Apache ECharts](https://echarts.apache.org/) 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.
+
+## Examples
+### Basic
+
+```ts file="./Basic.tsx"
+
+```
diff --git a/packages/react-charts/src/next/components/Sankey/index.ts b/packages/react-charts/src/next/components/Sankey/index.ts
new file mode 100644
index 00000000000..4bb44aaee6a
--- /dev/null
+++ b/packages/react-charts/src/next/components/Sankey/index.ts
@@ -0,0 +1 @@
+export * from './Sankey';
diff --git a/packages/react-charts/src/next/components/Sankey/theme.ts b/packages/react-charts/src/next/components/Sankey/theme.ts
new file mode 100644
index 00000000000..24dc3c0a259
--- /dev/null
+++ b/packages/react-charts/src/next/components/Sankey/theme.ts
@@ -0,0 +1,405 @@
+/* eslint-disable camelcase */
+import chart_theme_multi_color_ordered_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_100';
+import chart_theme_multi_color_ordered_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_200';
+import chart_theme_multi_color_ordered_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_300';
+import chart_theme_multi_color_ordered_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_400';
+import chart_theme_multi_color_ordered_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_500';
+import chart_theme_multi_color_ordered_ColorScale_600 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_600';
+import chart_theme_multi_color_ordered_ColorScale_700 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_700';
+import chart_theme_multi_color_ordered_ColorScale_800 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_800';
+import chart_theme_multi_color_ordered_ColorScale_900 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_900';
+import chart_theme_multi_color_ordered_ColorScale_1000 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_1000';
+import chart_theme_multi_color_ordered_ColorScale_1100 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_1100';
+import chart_theme_multi_color_ordered_ColorScale_1200 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_1200';
+import chart_theme_multi_color_ordered_ColorScale_1300 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_1300';
+import chart_theme_multi_color_ordered_ColorScale_1400 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_1400';
+import chart_theme_multi_color_ordered_ColorScale_1500 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_1500';
+import chart_theme_multi_color_ordered_ColorScale_1600 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_1600';
+import chart_theme_multi_color_ordered_ColorScale_1700 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_1700';
+import chart_theme_multi_color_ordered_ColorScale_1800 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_1800';
+import chart_theme_multi_color_ordered_ColorScale_1900 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_1900';
+import chart_theme_multi_color_ordered_ColorScale_2000 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_2000';
+import chart_theme_multi_color_ordered_ColorScale_2100 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_2100';
+import chart_theme_multi_color_ordered_ColorScale_2200 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_2200';
+import chart_theme_multi_color_ordered_ColorScale_2300 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_2300';
+import chart_theme_multi_color_ordered_ColorScale_2400 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_2400';
+import chart_theme_multi_color_ordered_ColorScale_2500 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_2500';
+
+// The color order below improves the color contrast in unordered charts; area & line
+// See https://github.com/patternfly/patternfly-next/issues/1551
+const COLOR_SCALE = [
+  chart_theme_multi_color_ordered_ColorScale_100.value,
+  chart_theme_multi_color_ordered_ColorScale_200.value,
+  chart_theme_multi_color_ordered_ColorScale_300.value,
+  chart_theme_multi_color_ordered_ColorScale_400.value,
+  chart_theme_multi_color_ordered_ColorScale_500.value,
+  chart_theme_multi_color_ordered_ColorScale_600.value,
+  chart_theme_multi_color_ordered_ColorScale_700.value,
+  chart_theme_multi_color_ordered_ColorScale_800.value,
+  chart_theme_multi_color_ordered_ColorScale_900.value,
+  chart_theme_multi_color_ordered_ColorScale_1000.value,
+  chart_theme_multi_color_ordered_ColorScale_1100.value,
+  chart_theme_multi_color_ordered_ColorScale_1200.value,
+  chart_theme_multi_color_ordered_ColorScale_1300.value,
+  chart_theme_multi_color_ordered_ColorScale_1400.value,
+  chart_theme_multi_color_ordered_ColorScale_1500.value,
+  chart_theme_multi_color_ordered_ColorScale_1600.value,
+  chart_theme_multi_color_ordered_ColorScale_1700.value,
+  chart_theme_multi_color_ordered_ColorScale_1800.value,
+  chart_theme_multi_color_ordered_ColorScale_1900.value,
+  chart_theme_multi_color_ordered_ColorScale_2000.value,
+  chart_theme_multi_color_ordered_ColorScale_2100.value,
+  chart_theme_multi_color_ordered_ColorScale_2200.value,
+  chart_theme_multi_color_ordered_ColorScale_2300.value,
+  chart_theme_multi_color_ordered_ColorScale_2400.value,
+  chart_theme_multi_color_ordered_ColorScale_2500.value
+];
+
+export const theme = {
+  color: COLOR_SCALE,
+  backgroundColor: 'rgba(0,0,0,0)',
+  textStyle: {},
+  title: {
+    textStyle: {
+      color: '#464646'
+    },
+    subtextStyle: {
+      color: '#6e7079'
+    }
+  },
+  line: {
+    itemStyle: {
+      borderWidth: 1
+    },
+    lineStyle: {
+      width: 2
+    },
+    symbolSize: 4,
+    symbol: 'emptyCircle',
+    smooth: false
+  },
+  radar: {
+    itemStyle: {
+      borderWidth: 1
+    },
+    lineStyle: {
+      width: 2
+    },
+    symbolSize: 4,
+    symbol: 'emptyCircle',
+    smooth: false
+  },
+  bar: {
+    itemStyle: {
+      barBorderWidth: 0,
+      barBorderColor: '#ccc'
+    }
+  },
+  pie: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: '#ccc'
+    }
+  },
+  scatter: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: '#ccc'
+    }
+  },
+  boxplot: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: '#ccc'
+    }
+  },
+  parallel: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: '#ccc'
+    }
+  },
+  sankey: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: '#ccc'
+    }
+  },
+  funnel: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: '#ccc'
+    }
+  },
+  gauge: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: '#ccc'
+    }
+  },
+  candlestick: {
+    itemStyle: {
+      color: '#eb5454',
+      color0: '#47b262',
+      borderColor: '#eb5454',
+      borderColor0: '#47b262',
+      borderWidth: 1
+    }
+  },
+  graph: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: '#ccc'
+    },
+    lineStyle: {
+      width: 1,
+      color: '#aaaaaa'
+    },
+    symbolSize: 4,
+    symbol: 'emptyCircle',
+    smooth: false,
+    color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
+    label: {
+      color: '#eeeeee'
+    }
+  },
+  map: {
+    itemStyle: {
+      areaColor: '#eee',
+      borderColor: '#444',
+      borderWidth: 0.5
+    },
+    label: {
+      color: '#000'
+    },
+    emphasis: {
+      itemStyle: {
+        areaColor: 'rgba(255,215,0,0.8)',
+        borderColor: '#444',
+        borderWidth: 1
+      },
+      label: {
+        color: 'rgb(100,0,0)'
+      }
+    }
+  },
+  geo: {
+    itemStyle: {
+      areaColor: '#eee',
+      borderColor: '#444',
+      borderWidth: 0.5
+    },
+    label: {
+      color: '#000'
+    },
+    emphasis: {
+      itemStyle: {
+        areaColor: 'rgba(255,215,0,0.8)',
+        borderColor: '#444',
+        borderWidth: 1
+      },
+      label: {
+        color: 'rgb(100,0,0)'
+      }
+    }
+  },
+  categoryAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#6E7079'
+      }
+    },
+    axisTick: {
+      show: true,
+      lineStyle: {
+        color: '#6E7079'
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: '#6E7079'
+    },
+    splitLine: {
+      show: false,
+      lineStyle: {
+        color: ['#E0E6F1']
+      }
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)']
+      }
+    }
+  },
+  valueAxis: {
+    axisLine: {
+      show: false,
+      lineStyle: {
+        color: '#6E7079'
+      }
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: '#6E7079'
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: '#6E7079'
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ['#E0E6F1']
+      }
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)']
+      }
+    }
+  },
+  logAxis: {
+    axisLine: {
+      show: false,
+      lineStyle: {
+        color: '#6E7079'
+      }
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: '#6E7079'
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: '#6E7079'
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ['#E0E6F1']
+      }
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)']
+      }
+    }
+  },
+  timeAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#6E7079'
+      }
+    },
+    axisTick: {
+      show: true,
+      lineStyle: {
+        color: '#6E7079'
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: '#6E7079'
+    },
+    splitLine: {
+      show: false,
+      lineStyle: {
+        color: ['#E0E6F1']
+      }
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)']
+      }
+    }
+  },
+  toolbox: {
+    iconStyle: {
+      borderColor: '#999999'
+    },
+    emphasis: {
+      iconStyle: {
+        borderColor: '#666666'
+      }
+    }
+  },
+  legend: {
+    textStyle: {
+      color: '#333333'
+    }
+  },
+  tooltip: {
+    axisPointer: {
+      lineStyle: {
+        color: '#cccccc',
+        width: 1
+      },
+      crossStyle: {
+        color: '#cccccc',
+        width: 1
+      }
+    }
+  },
+  timeline: {
+    lineStyle: {
+      color: '#dae1f5',
+      width: 2
+    },
+    itemStyle: {
+      color: '#a4b1d7',
+      borderWidth: 1
+    },
+    controlStyle: {
+      color: '#a4b1d7',
+      borderColor: '#a4b1d7',
+      borderWidth: 1
+    },
+    checkpointStyle: {
+      color: '#316bf3',
+      borderColor: '#ffffff'
+    },
+    label: {
+      color: '#a4b1d7'
+    },
+    emphasis: {
+      itemStyle: {
+        color: '#ffffff'
+      },
+      controlStyle: {
+        color: '#a4b1d7',
+        borderColor: '#a4b1d7',
+        borderWidth: 1
+      },
+      label: {
+        color: '#a4b1d7'
+      }
+    }
+  },
+  visualMap: {
+    color: ['#bf444c', '#d88273', '#f6efa6']
+  },
+  dataZoom: {
+    handleSize: 'undefined%',
+    textStyle: {}
+  },
+  markPoint: {
+    label: {
+      color: '#eeeeee'
+    },
+    emphasis: {
+      label: {
+        color: '#eeeeee'
+      }
+    }
+  }
+};
diff --git a/packages/react-charts/src/next/components/index.ts b/packages/react-charts/src/next/components/index.ts
new file mode 100644
index 00000000000..4bb44aaee6a
--- /dev/null
+++ b/packages/react-charts/src/next/components/index.ts
@@ -0,0 +1 @@
+export * from './Sankey';
diff --git a/packages/react-charts/src/next/index.ts b/packages/react-charts/src/next/index.ts
new file mode 100644
index 00000000000..07635cbbc8e
--- /dev/null
+++ b/packages/react-charts/src/next/index.ts
@@ -0,0 +1 @@
+export * from './components';
diff --git a/packages/react-charts/subpaths.config.json b/packages/react-charts/subpaths.config.json
new file mode 100644
index 00000000000..0e15baf4e1f
--- /dev/null
+++ b/packages/react-charts/subpaths.config.json
@@ -0,0 +1,4 @@
+{
+  "packageName": "@patternfly/react-charts",
+  "paths": ["next", "components"]
+}
diff --git a/packages/react-charts/tsconfig.json b/packages/react-charts/tsconfig.json
index 30bec2faa4a..cfd3101ef1b 100644
--- a/packages/react-charts/tsconfig.json
+++ b/packages/react-charts/tsconfig.json
@@ -1,9 +1,14 @@
 {
   "extends": "../tsconfig.base.json",
   "compilerOptions": {
+    "jsx": "react",
     "rootDir": "./src",
     "outDir": "./dist/esm",
-    "tsBuildInfoFile": "dist/esm.tsbuildinfo"
+    "tsBuildInfoFile": "dist/esm.tsbuildinfo",
+    "baseUrl": ".",
+    "paths": {
+      "./next": ["./src/next"]
+    }
   },
   "include": [
     "./src/*",
diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json
index 0dcb79a782e..5c783f471d6 100644
--- a/packages/react-docs/package.json
+++ b/packages/react-docs/package.json
@@ -32,10 +32,11 @@
     "@patternfly/react-styles": "workspace:^",
     "@patternfly/react-table": "workspace:^",
     "@patternfly/react-templates": "workspace:^",
-    "@patternfly/react-tokens": "workspace:^"
+    "@patternfly/react-tokens": "workspace:^",
+    "echarts": "^5.5.1"
   },
   "devDependencies": {
-    "@patternfly/documentation-framework": "^6.0.0-alpha.90",
+    "@patternfly/documentation-framework": "^6.0.0-alpha.91",
     "@patternfly/patternfly-a11y": "4.3.1"
   },
   "keywords": [
diff --git a/packages/react-docs/patternfly-docs/patternfly-docs.source.js b/packages/react-docs/patternfly-docs/patternfly-docs.source.js
index 44dd34bf0b9..0ddfdedfb87 100644
--- a/packages/react-docs/patternfly-docs/patternfly-docs.source.js
+++ b/packages/react-docs/patternfly-docs/patternfly-docs.source.js
@@ -39,8 +39,9 @@ module.exports = (baseSourceMD, sourceProps) => {
   sourceMD(path.join(reactTablePath, '/deprecated/components/**/examples/*.md'), 'react-deprecated');
   sourceMD(path.join(reactTablePath, '/**/demos/*.md'), 'react-demos');
 
-  // Charts MD (no demos yet)
-  sourceMD(path.join(reactChartsPath, '/**/examples/*.md'), 'react');
+  // Charts MD
+  sourceMD(path.join(reactChartsPath, '/components/**/examples/*.md'), 'react');
+  sourceMD(path.join(reactChartsPath, '/next/components/**/examples/*.md'), 'react-next');
 
   // Code Editor MD
   sourceMD(path.join(reactCodeEditorPath, '/**/examples/*.md'), 'react');
diff --git a/yarn.lock b/yarn.lock
index 35691e7dd5b..fd3bdfe2f2b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3021,7 +3021,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@patternfly/ast-helpers@npm:^1.4.0-alpha.79":
+"@patternfly/ast-helpers@npm:^1.4.0-alpha.80":
   version: 1.23.0
   resolution: "@patternfly/ast-helpers@npm:1.23.0"
   dependencies:
@@ -3034,15 +3034,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@patternfly/documentation-framework@npm:^6.0.0-alpha.90":
-  version: 6.0.0-alpha.90
-  resolution: "@patternfly/documentation-framework@npm:6.0.0-alpha.90"
+"@patternfly/documentation-framework@npm:^6.0.0-alpha.91":
+  version: 6.0.0-alpha.91
+  resolution: "@patternfly/documentation-framework@npm:6.0.0-alpha.91"
   dependencies:
     "@babel/core": "npm:^7.24.3"
     "@babel/preset-env": "npm:^7.24.3"
     "@babel/preset-react": "npm:^7.24.1"
     "@mdx-js/util": "npm:1.6.16"
-    "@patternfly/ast-helpers": "npm:^1.4.0-alpha.79"
+    "@patternfly/ast-helpers": "npm:^1.4.0-alpha.80"
     "@reach/router": "npm:@gatsbyjs/reach-router@1.3.9"
     autoprefixer: "npm:9.8.6"
     babel-loader: "npm:^9.1.3"
@@ -3109,7 +3109,7 @@ __metadata:
     react-dom: ^17.0.0 || ^18.0.0
   bin:
     pf-docs-framework: scripts/cli/cli.js
-  checksum: 10c0/e8559be62ec75946a04b6bb28ca34eba6024a48141cb991c64373c03fffff88a2af20410d591663cbdd3bc4f4b99324b7da3f6bee9ac9baaab157b67f5eba3a6
+  checksum: 10c0/0ce46f3fcf2d847a645734815c3c917aecc3b9531878ee1f962db1064ce36ebd829985bd2e975dfa11a2b397b09e7cb4e099b262972003878e24b7d19e344c2a
   languageName: node
   linkType: hard
 
@@ -3144,6 +3144,7 @@ __metadata:
   dependencies:
     "@patternfly/react-styles": "workspace:^"
     "@patternfly/react-tokens": "workspace:^"
+    "@types/echarts": "npm:^4.9.22"
     "@types/lodash": "npm:^4.17.7"
     fs-extra: "npm:^11.2.0"
     hoist-non-react-statics: "npm:^3.3.2"
@@ -3167,6 +3168,7 @@ __metadata:
     victory-voronoi-container: "npm:^37.0.2"
     victory-zoom-container: "npm:^37.0.2"
   peerDependencies:
+    echarts: ^5.5.1
     react: ^17 || ^18
     react-dom: ^17 || ^18
   languageName: unknown
@@ -3213,7 +3215,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@patternfly/react-docs@workspace:packages/react-docs"
   dependencies:
-    "@patternfly/documentation-framework": "npm:^6.0.0-alpha.90"
+    "@patternfly/documentation-framework": "npm:^6.0.0-alpha.91"
     "@patternfly/patternfly": "npm:6.0.0-prerelease.3"
     "@patternfly/patternfly-a11y": "npm:4.3.1"
     "@patternfly/react-charts": "workspace:^"
@@ -3225,6 +3227,7 @@ __metadata:
     "@patternfly/react-table": "workspace:^"
     "@patternfly/react-templates": "workspace:^"
     "@patternfly/react-tokens": "workspace:^"
+    echarts: "npm:^5.5.1"
   languageName: unknown
   linkType: soft
 
@@ -4238,6 +4241,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/echarts@npm:^4.9.22":
+  version: 4.9.22
+  resolution: "@types/echarts@npm:4.9.22"
+  dependencies:
+    "@types/zrender": "npm:*"
+  checksum: 10c0/00e5e6f75b4a1ee46df0286fc1fe5b42773970280576317723d7174678598d0aeb2bac36870276ac1e65bf053241443334ef37ae97a84c1b782abdb980991f39
+  languageName: node
+  linkType: hard
+
 "@types/eslint-scope@npm:^3.7.3":
   version: 3.7.7
   resolution: "@types/eslint-scope@npm:3.7.7"
@@ -4736,6 +4748,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/zrender@npm:*":
+  version: 4.0.6
+  resolution: "@types/zrender@npm:4.0.6"
+  checksum: 10c0/baaf25731115fe18cb281bf38e6d414964307532381d8479edf7a4b25baecec737fed620802380fa126139e506d56d62d70fe8142c5c386e340fa91aa988dddd
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/eslint-plugin@npm:7.18.0":
   version: 7.18.0
   resolution: "@typescript-eslint/eslint-plugin@npm:7.18.0"
@@ -8699,6 +8718,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"echarts@npm:^5.5.1":
+  version: 5.5.1
+  resolution: "echarts@npm:5.5.1"
+  dependencies:
+    tslib: "npm:2.3.0"
+    zrender: "npm:5.6.0"
+  checksum: 10c0/2f7e3037f17fda99d977092767943f4d9b0c8f886f86701ec88591707713b5e5fd683e56086b6ba5245b322f088184bdb06eac488234c20a1869b08cb6b4e523
+  languageName: node
+  linkType: hard
+
 "editions@npm:^2.2.0":
   version: 2.3.1
   resolution: "editions@npm:2.3.1"
@@ -19954,6 +19983,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tslib@npm:2.3.0":
+  version: 2.3.0
+  resolution: "tslib@npm:2.3.0"
+  checksum: 10c0/a845aed84e7e7dbb4c774582da60d7030ea39d67307250442d35c4c5dd77e4b44007098c37dd079e100029c76055f2a362734b8442ba828f8cc934f15ed9be61
+  languageName: node
+  linkType: hard
+
 "tslib@npm:^1.8.1, tslib@npm:^1.9.0":
   version: 1.14.1
   resolution: "tslib@npm:1.14.1"
@@ -22019,3 +22055,12 @@ __metadata:
   checksum: 10c0/856117aa15cf5103d2a2fb173f0ab4acb12b4b4d0ed3ab249fdbbf612e55d1cadfd27a6110940e24746fb0a78cf640b522cc8bca76f30a3b00b66e90cf82abe0
   languageName: node
   linkType: hard
+
+"zrender@npm:5.6.0":
+  version: 5.6.0
+  resolution: "zrender@npm:5.6.0"
+  dependencies:
+    tslib: "npm:2.3.0"
+  checksum: 10c0/f7c5a1739dfec60b9bead0d0657c47868391b1009cc82a603f9dbf247fa625df28dcdb3e7b2e18404657e2c987f95e0e1bb5613519c2d823854f3dda44e2ee96
+  languageName: node
+  linkType: hard