diff --git a/showcase/app/templates/page-components/charts/index.hbs b/showcase/app/templates/page-components/charts/index.hbs
new file mode 100644
index 00000000000..ef9b3449b54
--- /dev/null
+++ b/showcase/app/templates/page-components/charts/index.hbs
@@ -0,0 +1,61 @@
+{{!
+ Copyright (c) HashiCorp, Inc.
+ SPDX-License-Identifier: MPL-2.0
+}}
+
+{{page-title "Charts"}}
+
+
Charts
+
+
Carbon Charts Donut
+
+
+
+
+ Clusters
+
+
+
+
+
+
+ Services
+ From clusters above v1.14.0
+
+ 5
+
+
+
+
+
+ Service Instances
+
+
+
+
+ Carbon Charts Meter
+
+
+
+
+
+
+
+
+
+
+
+ Carbon Charts Bar
+
+
+
+
+
\ No newline at end of file
diff --git a/showcase/tests/acceptance/components/hds/charts/index.js b/showcase/tests/acceptance/components/hds/charts/index.js
new file mode 100644
index 00000000000..ffdcfaac529
--- /dev/null
+++ b/showcase/tests/acceptance/components/hds/charts/index.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { module, test } from 'qunit';
+import { visit } from '@ember/test-helpers';
+import { setupApplicationTest } from 'showcase/tests/helpers';
+import { a11yAudit } from 'ember-a11y-testing/test-support';
+
+module('Acceptance | components/charts', function (hooks) {
+ setupApplicationTest(hooks);
+
+ test('Components/charts page passes automated a11y checks', async function (assert) {
+ await visit('/components/charts/donut');
+
+ await a11yAudit();
+
+ assert.ok(true, 'a11y automation audit passed');
+ });
+});
diff --git a/showcase/tests/acceptance/percy-test.js b/showcase/tests/acceptance/percy-test.js
index f446348071f..cf2bb238c5b 100644
--- a/showcase/tests/acceptance/percy-test.js
+++ b/showcase/tests/acceptance/percy-test.js
@@ -84,6 +84,9 @@ module('Acceptance | Percy test', function (hooks) {
await visit('/components/card');
await percySnapshot('Card');
+ await visit('/components/charts');
+ await percySnapshot('Charts');
+
await visit('/components/code-block');
await percySnapshot('CodeBlock');
diff --git a/showcase/tests/integration/components/hds/charts/bar/index-test.js b/showcase/tests/integration/components/hds/charts/bar/index-test.js
new file mode 100644
index 00000000000..8dfd3ce9289
--- /dev/null
+++ b/showcase/tests/integration/components/hds/charts/bar/index-test.js
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'showcase/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | hds/charts/bar/index', function (hooks) {
+ setupRenderingTest(hooks);
+
+ test('it should render the component with a CSS class that matches the component name', async function (assert) {
+ this.data = [
+ { date: '2025-01', value: 1000 },
+ { date: '2025-02', value: 1500 },
+ ];
+
+ await render(
+ hbs`
`,
+ );
+ assert.dom('#test-charts-bar').hasClass('hds-charts-bar');
+ });
+});
diff --git a/showcase/tests/integration/components/hds/charts/donut/index-test.js b/showcase/tests/integration/components/hds/charts/donut/index-test.js
new file mode 100644
index 00000000000..5b6f50dc91a
--- /dev/null
+++ b/showcase/tests/integration/components/hds/charts/donut/index-test.js
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'showcase/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | hds/charts/donut/index', function (hooks) {
+ setupRenderingTest(hooks);
+
+ test('it should render the component with a CSS class that matches the component name', async function (assert) {
+ this.data = [
+ { group: 'group 1', value: 2 },
+ { group: 'group 2', value: 4 },
+ ];
+
+ await render(
+ hbs`
`,
+ );
+ assert.dom('#test-charts-donut').hasClass('hds-charts-donut');
+ });
+});
diff --git a/showcase/tests/integration/components/hds/charts/meter/index-test.js b/showcase/tests/integration/components/hds/charts/meter/index-test.js
new file mode 100644
index 00000000000..91d6db1c070
--- /dev/null
+++ b/showcase/tests/integration/components/hds/charts/meter/index-test.js
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'showcase/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | hds/charts/meter/index', function (hooks) {
+ setupRenderingTest(hooks);
+
+ test('it should render the component with a CSS class that matches the component name', async function (assert) {
+ this.data = [
+ { group: 'Test group 1', value: 30 },
+ { group: 'Test group 2', value: 70 },
+ ];
+
+ await render(
+ hbs`
`,
+ );
+ assert.dom('#test-charts-meter').hasClass('hds-charts-meter');
+ });
+});