diff --git a/package.json b/package.json
index d125b631926..a84c15d6d25 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,7 @@
"@carbon/icons-react": "^10.38.0"
},
"dependencies": {
- "@carbon/charts-react": "0.48.0",
+ "@carbon/charts-react": "0.48.4",
"@carbon/elements": "^10.42.0",
"@carbon/icons": "^10.38.0",
"@carbon/icons-react": "^10.38.0",
diff --git a/src/pages/data-visualization/chart-types/images/network-diagram.svg b/src/pages/data-visualization/chart-types/images/network-diagram.svg
new file mode 100644
index 00000000000..15dbddee89d
--- /dev/null
+++ b/src/pages/data-visualization/chart-types/images/network-diagram.svg
@@ -0,0 +1,67 @@
+
+
\ No newline at end of file
diff --git a/src/pages/data-visualization/chart-types/index.mdx b/src/pages/data-visualization/chart-types/index.mdx
index 48c43c97517..4f2c25e1387 100644
--- a/src/pages/data-visualization/chart-types/index.mdx
+++ b/src/pages/data-visualization/chart-types/index.mdx
@@ -302,14 +302,14 @@ appropriate chart type.
+
-
+
diff --git a/src/pages/data-visualization/complex-charts/index.mdx b/src/pages/data-visualization/complex-charts/index.mdx
index bca4818c49a..ce617be0fd8 100755
--- a/src/pages/data-visualization/complex-charts/index.mdx
+++ b/src/pages/data-visualization/complex-charts/index.mdx
@@ -178,12 +178,28 @@ it easier for users to understand complex connections at a glance. These
diagrams are especially useful for isolating problems or when designing a new
system.
-The example below illustrates a swimlane graph with expandable nodes developed
-by the Security team. In products like QRadar these diagrams are often paired
-with side and filter panels. However, a simplified version of the component is
-available in the
-[carbon-charts repository](https://github.com/carbon-design-system/carbon-charts/pull/435)
-for IBM designers to adapt.
+### Building blocks
+
+Carbon Charts offers building blocks for network diagrams in the form of
+**React** & **Angular** components.
+
+Note that Carbon Charts does not provide layouts for diagrams. You can utilize
+these components alongside graphing libraries (such as elkjs), or by composing
+your own layouts.
+
+**Getting started guides:**
+
+- [React](https://carbon-design-system.github.io/carbon-charts/react/?path=/story/diagrams--start-here)
+- [Angular](https://carbon-design-system.github.io/carbon-charts/angular/?path=/story/diagrams--start-here)
+
+Here's an example using elkjs in react
+
+
diff --git a/yarn.lock b/yarn.lock
index 3e17230eae2..e250e7897a1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1081,19 +1081,19 @@
"@babel/helper-validator-identifier" "^7.14.9"
to-fast-properties "^2.0.0"
-"@carbon/charts-react@0.48.0":
- version "0.48.0"
- resolved "https://registry.yarnpkg.com/@carbon/charts-react/-/charts-react-0.48.0.tgz#034d5ba8e8e18c6a14c9f2ceb0de0e7a2f77348c"
- integrity sha512-3schxAeQCU7HXa/GkGohlPbjUWzJOTttXGpebziETKvTxQgUUdXsvPzduq+taNmpiHx2T4xLMVhDSSGzKCBqOQ==
+"@carbon/charts-react@0.48.4":
+ version "0.48.4"
+ resolved "https://registry.yarnpkg.com/@carbon/charts-react/-/charts-react-0.48.4.tgz#b4518d27c6c8e044564d300fa609189b0d73d230"
+ integrity sha512-ucpk4uXxmp/vdzJli3A6EzPL6P5Tbp6tD1utFrn8JKAQhtzye+EmuP/LlCSayLm3G/pcAizDntMsoHzjDjVJiQ==
dependencies:
- "@carbon/charts" "^0.48.0"
+ "@carbon/charts" "^0.48.4"
"@carbon/icons-react" "^10.32.0"
"@carbon/telemetry" "0.0.0-alpha.6"
-"@carbon/charts@^0.48.0":
- version "0.48.0"
- resolved "https://registry.yarnpkg.com/@carbon/charts/-/charts-0.48.0.tgz#0ff963d0e410656f4300256e259e3adc731f5399"
- integrity sha512-TbWxDx0phwAngnja08rpg2+lWzZkoayHPfXYjpl1uCCM+zaRKxsqdXLWnLF/1IsaCniT18CHA7XkLf/50ChKzg==
+"@carbon/charts@^0.48.4":
+ version "0.48.4"
+ resolved "https://registry.yarnpkg.com/@carbon/charts/-/charts-0.48.4.tgz#d98deef52ee4d15c19188f7fc6cbba88f04189d8"
+ integrity sha512-jga2T+RHHCMnyhte8e7B/85w4UcmVrA/iJs4KczstiCUDixgYZUcupCC/4lg89m1J10dkgNEHrYNr9FiV2ZRgw==
dependencies:
"@carbon/colors" "10.29.0"
"@carbon/telemetry" "0.0.0-alpha.6"