diff --git a/packages/react/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormContent.jsx b/packages/react/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormContent.jsx
index ae70eea26f..f6a77960a3 100644
--- a/packages/react/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormContent.jsx
+++ b/packages/react/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormContent.jsx
@@ -20,6 +20,9 @@ import { Dropdown } from '../../../../Dropdown';
 import DataSeriesFormItemModal from '../DataSeriesFormItemModal';
 import { CARD_TYPES, BAR_CHART_TYPES } from '../../../../../constants/LayoutConstants';
 import ContentFormItemTitle from '../ContentFormItemTitle';
+import HierarchyDataFormItems, {
+  isHierarchyDataItem,
+} from '../HierarchyDataFormItems/HierarchyDataFormItems';
 
 import BarChartDataSeriesContent from './BarChartDataSeriesContent';
 
@@ -328,6 +331,32 @@ const DataSeriesFormItem = ({
     [cardConfig, dataSection, onChange, setSelectedDataItems, validDataItems]
   );
 
+  const handleHierarchyDataItemChange = useCallback(
+    (items) => {
+      const updatedItems = items.map((item) => ({
+        ...item,
+        // create a unique dataSourceId if it's going into attributes
+        // if it's going into the groupBy section then just use the dataItem ID
+        dataSourceId: `${item.dataItemId}_${uuidv4()}`,
+      }));
+
+      const selectedItems = canMultiSelectDataItems
+        ? [...dataSection, ...updatedItems]
+        : [updatedItems[0]];
+
+      const newCard = handleDataSeriesChange(
+        selectedItems,
+        cardConfig,
+        setEditDataSeries,
+        undefined,
+        removedItemsCountRef
+      );
+      setSelectedDataItems(selectedItems.map(({ dataSourceId }) => dataSourceId));
+      onChange(newCard);
+    },
+    [canMultiSelectDataItems, cardConfig, dataSection, onChange, setSelectedDataItems]
+  );
+
   const handleEditButton = useCallback(
     async (dataItem, i) => {
       const dataItemWithMetaData = validDataItems?.find(
@@ -387,62 +416,67 @@ const DataSeriesFormItem = ({
     [cardConfig, dataSection, onChange, removedDataItems, setSelectedDataItems]
   );
 
+  const generateListItems = useCallback(
+    (data, isHierarchy = false) =>
+      data
+        ?.filter((dataItem) => isHierarchyDataItem(dataItem) === isHierarchy)
+        .map((dataItem, i) => {
+          const colorIndex = (i + removedItemsCountRef.current) % DATAITEM_COLORS_OPTIONS.length;
+          const iconColorOption = dataItem.color || DATAITEM_COLORS_OPTIONS[colorIndex];
+          return {
+            id: dataItem.dataSourceId,
+            content: {
+              value: dataItem.label || dataItem.dataItemId,
+              icon:
+                cardConfig.type === CARD_TYPES.TIMESERIES || cardConfig.type === CARD_TYPES.BAR ? (
+                  <div
+                    className={`${baseClassName}--data-item-list--item-color-icon`}
+                    style={{
+                      '--icon-color-option': iconColorOption,
+                    }}
+                  />
+                ) : null,
+              rowActions: () => [
+                <Button
+                  key={`data-item-${dataItem.dataSourceId}_edit`}
+                  renderIcon={Edit}
+                  hasIconOnly
+                  kind="ghost"
+                  size="sm"
+                  onClick={() => handleEditButton(dataItem, i)}
+                  iconDescription={mergedI18n.edit}
+                  tooltipPosition="left"
+                  tooltipAlignment="center"
+                />,
+                <Button
+                  key={`data-item-${dataItem.dataSourceId}_remove`}
+                  renderIcon={MisuseOutline}
+                  hasIconOnly
+                  kind="ghost"
+                  size="sm"
+                  onClick={() => handleRemoveButton(dataItem)}
+                  iconDescription={mergedI18n.remove}
+                  tooltipPosition="left"
+                  tooltipAlignment="center"
+                />,
+              ],
+            },
+          };
+        }) || [],
+    [cardConfig.type, handleEditButton, handleRemoveButton, mergedI18n.edit, mergedI18n.remove]
+  );
+
   const dataItemListItems = useMemo(
-    () =>
-      dataSection?.map((dataItem, i) => {
-        const colorIndex = (i + removedItemsCountRef.current) % DATAITEM_COLORS_OPTIONS.length;
-        const iconColorOption = dataItem.color || DATAITEM_COLORS_OPTIONS[colorIndex];
-        return {
-          id: dataItem.dataSourceId,
-          content: {
-            value: dataItem.label || dataItem.dataItemId,
-            icon:
-              cardConfig.type === CARD_TYPES.TIMESERIES || cardConfig.type === CARD_TYPES.BAR ? (
-                <div
-                  className={`${baseClassName}--data-item-list--item-color-icon`}
-                  style={{
-                    '--icon-color-option': iconColorOption,
-                  }}
-                />
-              ) : null,
-            rowActions: () => [
-              <Button
-                key={`data-item-${dataItem.dataSourceId}_edit`}
-                renderIcon={Edit}
-                hasIconOnly
-                kind="ghost"
-                size="sm"
-                onClick={() => handleEditButton(dataItem, i)}
-                iconDescription={mergedI18n.edit}
-                tooltipPosition="left"
-                tooltipAlignment="center"
-              />,
-              <Button
-                key={`data-item-${dataItem.dataSourceId}_remove`}
-                renderIcon={MisuseOutline}
-                hasIconOnly
-                kind="ghost"
-                size="sm"
-                onClick={() => handleRemoveButton(dataItem)}
-                iconDescription={mergedI18n.remove}
-                tooltipPosition="left"
-                tooltipAlignment="center"
-              />,
-            ],
-          },
-        };
-      }),
-    [
-      cardConfig.type,
-      dataSection,
-      handleEditButton,
-      handleRemoveButton,
-      mergedI18n.edit,
-      mergedI18n.remove,
-    ]
+    () => generateListItems(dataSection),
+    [dataSection, generateListItems]
   );
 
-  return !isEmpty(validDataItems) ? (
+  const hierarchyDataItemListItems = useMemo(
+    () => generateListItems(dataSection, true),
+    [dataSection, generateListItems]
+  );
+
+  return (
     <>
       <DataSeriesFormItemModal
         cardConfig={cardConfig}
@@ -468,90 +502,105 @@ const DataSeriesFormItem = ({
         }}
         isLarge
       />
-      <ContentFormItemTitle
-        title={mergedI18n.dataItemEditorSectionTitle}
-        // Specific to each card type
-        tooltip={{ ...cardSpecificTooltip }}
-      />
-      {cardConfig.type === CARD_TYPES.BAR && (
-        <BarChartDataSeriesContent
-          cardConfig={cardConfig}
-          onChange={onChange}
-          availableDimensions={availableDimensions}
-          i18n={mergedI18n}
-          translateWithId={translateWithId}
-        />
-      )}
-      <div className={`${baseClassName}--input`}>
-        {canMultiSelectDataItems ? (
-          <ComboBox
-            // need to re-gen if selected card changes or if a dataItem is removed from the list
-            key={`data-item-select-${hash(validDataItems)}-selected_card-id-${cardConfig.id}`}
-            data-testid="editor--data-series--combobox"
-            id={`${cardConfig.id}_dataSourceIds-combobox`}
-            items={formatDataItemsForDropdown(validDataItems)}
-            itemToString={(item) => item?.text}
-            titleText={mergedI18n.dataItemEditorDataItemTitle}
-            addToList={false}
-            translateWithId={translateWithId}
-            shouldFilterItem={({ item, inputValue }) => {
-              return (
-                isEmpty(inputValue) ||
-                item?.text?.toLowerCase()?.includes(inputValue?.toLowerCase())
-              );
-            }}
-            placeholder={mergedI18n.filter}
-            // clears out the input field after each selection
-            selectedItem={{ id: '', text: '' }}
-            onChange={handleSimpleDataSeriesChange}
-            light
+      {!isEmpty(validDataItems) && (
+        <>
+          <ContentFormItemTitle
+            title={mergedI18n.dataItemEditorSectionTitle}
+            // Specific to each card type
+            tooltip={{ ...cardSpecificTooltip }}
           />
-        ) : (
-          // Can't select more than one dataItem
-          <Dropdown
-            id={`${cardConfig.id}_dataSourceId`}
-            direction="bottom"
-            label={mergedI18n.selectDataItem}
-            light
-            translateWithId={translateWithId}
-            title={mergedI18n.selectDataItem}
-            titleText={mergedI18n.dataItem}
-            items={validDataItems.map(({ dataSourceId }) => dataSourceId)}
-            selectedItem={
-              !isEmpty(cardConfig.content?.series) ? cardConfig.content?.series[0].dataItemId : null
-            }
-            onChange={({ selectedItem }) => {
-              const itemWithMetaData = validDataItems?.find(
-                ({ dataSourceId }) => dataSourceId === selectedItem
-              );
-              const newCard = handleDataSeriesChange(
-                [
-                  {
-                    id: selectedItem,
-                    ...(itemWithMetaData && { ...itemWithMetaData }),
-                    dataSourceId: `${selectedItem}_${uuidv4()}`,
-                  },
-                ],
-                cardConfig,
-                setEditDataSeries
-              );
-              setSelectedDataItems([selectedItem]);
-              onChange(newCard);
-            }}
+          {cardConfig.type === CARD_TYPES.BAR && (
+            <BarChartDataSeriesContent
+              cardConfig={cardConfig}
+              onChange={onChange}
+              availableDimensions={availableDimensions}
+              i18n={mergedI18n}
+              translateWithId={translateWithId}
+            />
+          )}
+          <div className={`${baseClassName}--input`}>
+            {canMultiSelectDataItems ? (
+              <ComboBox
+                // need to re-gen if selected card changes or if a dataItem is removed from the list
+                key={`data-item-select-${hash(validDataItems)}-selected_card-id-${cardConfig.id}`}
+                data-testid="editor--data-series--combobox"
+                id={`${cardConfig.id}_dataSourceIds-combobox`}
+                items={formatDataItemsForDropdown(validDataItems)}
+                itemToString={(item) => item?.text}
+                titleText={mergedI18n.dataItemEditorDataItemTitle}
+                addToList={false}
+                translateWithId={translateWithId}
+                shouldFilterItem={({ item, inputValue }) => {
+                  return (
+                    isEmpty(inputValue) ||
+                    item?.text?.toLowerCase()?.includes(inputValue?.toLowerCase())
+                  );
+                }}
+                placeholder={mergedI18n.filter}
+                // clears out the input field after each selection
+                selectedItem={{ id: '', text: '' }}
+                onChange={handleSimpleDataSeriesChange}
+                light
+              />
+            ) : (
+              // Can't select more than one dataItem
+              <Dropdown
+                id={`${cardConfig.id}_dataSourceId`}
+                direction="bottom"
+                label={mergedI18n.selectDataItem}
+                light
+                translateWithId={translateWithId}
+                title={mergedI18n.selectDataItem}
+                titleText={mergedI18n.dataItem}
+                items={validDataItems.map(({ dataSourceId }) => dataSourceId)}
+                selectedItem={
+                  !isEmpty(dataItemListItems) && !isEmpty(cardConfig.content?.series)
+                    ? cardConfig.content?.series[0].dataItemId
+                    : null
+                }
+                onChange={({ selectedItem }) => {
+                  const itemWithMetaData = validDataItems?.find(
+                    ({ dataSourceId }) => dataSourceId === selectedItem
+                  );
+                  const newCard = handleDataSeriesChange(
+                    [
+                      {
+                        id: selectedItem,
+                        ...(itemWithMetaData && { ...itemWithMetaData }),
+                        dataSourceId: `${selectedItem}_${uuidv4()}`,
+                      },
+                    ],
+                    cardConfig,
+                    setEditDataSeries
+                  );
+                  setSelectedDataItems([selectedItem]);
+                  onChange(newCard);
+                }}
+              />
+            )}
+          </div>
+
+          <List
+            className={`${baseClassName}--data-item-list`}
+            key={`data-item-list${selectedDataItems.length}`}
+            // need to force an empty "empty state"
+            emptyState={<div />}
+            title=""
+            items={dataItemListItems}
           />
-        )}
-      </div>
+        </>
+      )}
 
-      <List
-        className={`${baseClassName}--data-item-list`}
-        key={`data-item-list${selectedDataItems.length}`}
-        // need to force an empty "empty state"
-        emptyState={<div />}
-        title=""
-        items={dataItemListItems}
+      <HierarchyDataFormItems
+        listClassName={`${baseClassName}--data-item-list`}
+        cardConfig={cardConfig}
+        hierarchyDataItemListItems={hierarchyDataItemListItems}
+        handleHierarchyDataItemChange={handleHierarchyDataItemChange}
+        i18n={i18n}
+        actions={actions}
       />
     </>
-  ) : null;
+  );
 };
 DataSeriesFormItem.defaultProps = defaultProps;
 DataSeriesFormItem.propTypes = propTypes;
diff --git a/packages/react/src/components/CardEditor/CardEditForm/CardEditFormItems/HierarchyDataFormItems/HierarchyDataFormItems.jsx b/packages/react/src/components/CardEditor/CardEditForm/CardEditFormItems/HierarchyDataFormItems/HierarchyDataFormItems.jsx
new file mode 100644
index 0000000000..ec26b294dc
--- /dev/null
+++ b/packages/react/src/components/CardEditor/CardEditForm/CardEditFormItems/HierarchyDataFormItems/HierarchyDataFormItems.jsx
@@ -0,0 +1,84 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { Add } from '@carbon/icons-react';
+
+import { defaultDashboardEditorActionsProps } from '../../../../DashboardEditor/editorUtils';
+import ContentFormItemTitle from '../ContentFormItemTitle';
+import Button from '../../../../Button';
+import List from '../../../../List/List';
+
+export const isHierarchyDataItem = (dataItem) => dataItem.hasOwnProperty('resourceData');
+
+const propTypes = {
+  cardConfig: PropTypes.shape({}).isRequired,
+  /** Hierarchy Data items to display */
+  hierarchyDataItemListItems: PropTypes.arrayOf(PropTypes.shape({})),
+  /** Handler for hierarchy data item changes */
+  handleHierarchyDataItemChange: PropTypes.func.isRequired,
+  /** Class name for the list */
+  listClassName: PropTypes.string,
+  i18n: PropTypes.shape({
+    hierarchyDataItemSectionTitle: PropTypes.string,
+    addHierarchyDataItemLabel: PropTypes.string,
+  }),
+  actions: defaultDashboardEditorActionsProps,
+};
+
+const defaultProps = {
+  hierarchyDataItemListItems: [],
+  listClassName: '',
+  i18n: {
+    hierarchyDataItemSectionTitle: 'Hierarchy Data Item',
+    addHierarchyDataItemLabel: 'Add Hierarchy Data Item',
+  },
+  actions: defaultDashboardEditorActionsProps,
+};
+
+const HierarchyDataFormItems = ({
+  cardConfig,
+  hierarchyDataItemListItems,
+  handleHierarchyDataItemChange,
+  listClassName,
+  i18n,
+  actions,
+}) => {
+  const mergedI18n = { ...defaultProps.i18n, ...i18n };
+  const {
+    onAddHierarchyDataItems,
+    dataSeriesFormActions: { hasHierarchyDataItemsEnabled },
+  } = actions;
+
+  // determine if hierarchy data items are available
+  const isHierarchyDataItemsEnabled = useMemo(
+    () => hasHierarchyDataItemsEnabled && hasHierarchyDataItemsEnabled(cardConfig),
+    [cardConfig, hasHierarchyDataItemsEnabled]
+  );
+
+  return (
+    isHierarchyDataItemsEnabled && (
+      <>
+        <ContentFormItemTitle title={mergedI18n.hierarchyDataItemSectionTitle} />
+        <Button
+          kind="ghost"
+          renderIcon={Add}
+          size="md"
+          onClick={() => onAddHierarchyDataItems(cardConfig, handleHierarchyDataItemChange)}
+        >
+          {mergedI18n.addHierarchyDataItemLabel}
+        </Button>
+        <List
+          className={listClassName}
+          // need to force an empty "empty state"
+          emptyState={<div />}
+          title=""
+          items={hierarchyDataItemListItems}
+        />
+      </>
+    )
+  );
+};
+
+HierarchyDataFormItems.propTypes = propTypes;
+HierarchyDataFormItems.defaultProps = defaultProps;
+
+export default HierarchyDataFormItems;
diff --git a/packages/react/src/components/CardEditor/CardEditForm/CardEditFormItems/TableCardFormItems/TableCardFormContent.jsx b/packages/react/src/components/CardEditor/CardEditForm/CardEditFormItems/TableCardFormItems/TableCardFormContent.jsx
index 7b8a90d556..5a4ad315e5 100644
--- a/packages/react/src/components/CardEditor/CardEditForm/CardEditFormItems/TableCardFormItems/TableCardFormContent.jsx
+++ b/packages/react/src/components/CardEditor/CardEditForm/CardEditFormItems/TableCardFormItems/TableCardFormContent.jsx
@@ -20,6 +20,9 @@ import DataSeriesFormItemModal from '../DataSeriesFormItemModal';
 import ContentFormItemTitle from '../ContentFormItemTitle';
 import { CARD_SIZES, CARD_TYPES } from '../../../../../constants/LayoutConstants';
 import { formatDataItemsForDropdown } from '../DataSeriesFormItems/DataSeriesFormContent';
+import HierarchyDataFormItems, {
+  isHierarchyDataItem,
+} from '../HierarchyDataFormItems/HierarchyDataFormItems';
 
 const { iotPrefix } = settings;
 
@@ -209,6 +212,23 @@ const TableCardFormContent = ({
     }
   };
 
+  const handleHierarchyDataItemChange = useCallback(
+    (items) => {
+      const updatedItems = items.map((item) => ({
+        ...item,
+        // create a unique dataSourceId if it's going into attributes
+        // if it's going into the groupBy section then just use the dataItem ID
+        dataSourceId: `${item.dataItemId}_${uuidv4()}`,
+      }));
+      const selectedItems = [...dataSection, ...updatedItems];
+
+      const newCard = handleDataSeriesChange(selectedItems, cardConfig, null, null);
+      setSelectedDataItems(selectedItems.map(({ text }) => text));
+      onChange(newCard);
+    },
+    [cardConfig, dataSection, onChange, setSelectedDataItems]
+  );
+
   // need to handle thresholds from the DataSeriesFormItemModal and convert it to the right format
   const handleDataItemModalChanges = useCallback(
     (card) => {
@@ -319,40 +339,52 @@ const TableCardFormContent = ({
     [cardConfig, onEditDataItem, validDataItems]
   );
 
+  const generateListItems = useCallback(
+    (data, isHierarchy = false) =>
+      data
+        ?.filter((dataItem) => isHierarchyDataItem(dataItem) === isHierarchy)
+        ?.map((dataItem) => ({
+          id: dataItem.dataSourceId,
+          content: {
+            value: dataItem.label || dataItem.dataItemId,
+            icon: null,
+            rowActions: () => [
+              <Button
+                key={`data-item-${dataItem.dataSourceId}`}
+                renderIcon={Edit}
+                hasIconOnly
+                kind="ghost"
+                size="sm"
+                onClick={() => handleEditButton(dataItem)}
+                iconDescription={mergedI18n.edit}
+                tooltipPosition="left"
+                tooltipAlignment="center"
+              />,
+              <Button
+                key={`data-item-${dataItem.dataSourceId}_remove`}
+                renderIcon={MisuseOutline}
+                hasIconOnly
+                kind="ghost"
+                size="sm"
+                onClick={() => handleRemoveButton(dataItem)}
+                iconDescription={mergedI18n.remove}
+                tooltipPosition="left"
+                tooltipAlignment="center"
+              />,
+            ],
+          },
+        })),
+    [handleEditButton, handleRemoveButton, mergedI18n.edit, mergedI18n.remove]
+  );
+
   const dataListItems = useMemo(
-    () =>
-      dataSection?.map((dataItem) => ({
-        id: dataItem.dataSourceId,
-        content: {
-          value: dataItem.label || dataItem.dataItemId,
-          icon: null,
-          rowActions: () => [
-            <Button
-              key={`data-item-${dataItem.dataSourceId}`}
-              renderIcon={Edit}
-              hasIconOnly
-              kind="ghost"
-              size="sm"
-              onClick={() => handleEditButton(dataItem)}
-              iconDescription={mergedI18n.edit}
-              tooltipPosition="left"
-              tooltipAlignment="center"
-            />,
-            <Button
-              key={`data-item-${dataItem.dataSourceId}_remove`}
-              renderIcon={MisuseOutline}
-              hasIconOnly
-              kind="ghost"
-              size="sm"
-              onClick={() => handleRemoveButton(dataItem)}
-              iconDescription={mergedI18n.remove}
-              tooltipPosition="left"
-              tooltipAlignment="center"
-            />,
-          ],
-        },
-      })),
-    [dataSection, handleEditButton, handleRemoveButton, mergedI18n.edit, mergedI18n.remove]
+    () => generateListItems(dataSection),
+    [dataSection, generateListItems]
+  );
+
+  const hierarchyDataListItems = useMemo(
+    () => generateListItems(dataSection, true),
+    [dataSection, generateListItems]
   );
 
   return (
@@ -414,7 +446,7 @@ const TableCardFormContent = ({
         />
       </div>
 
-      {!isEmpty(validDimensions) ? (
+      {!isEmpty(validDimensions) && (
         <div
           className={`${baseClassName}--input`} // Dimensions selector
         >
@@ -458,7 +490,7 @@ const TableCardFormContent = ({
             titleText={mergedI18n.dataItemEditorDimensionTitle}
           />
         </div>
-      ) : null}
+      )}
       <List
         // Lists the selected dataItem columns in the bottom section and allow additional configuration
         key={`data-item-list${selectedDataItems.length}`}
@@ -467,6 +499,14 @@ const TableCardFormContent = ({
         title=""
         items={dataListItems}
       />
+
+      <HierarchyDataFormItems
+        cardConfig={cardConfig}
+        hierarchyDataItemListItems={hierarchyDataListItems}
+        handleHierarchyDataItemChange={handleHierarchyDataItemChange}
+        i18n={i18n}
+        actions={actions}
+      />
     </div>
   );
 };
diff --git a/packages/react/src/components/DashboardEditor/DashboardEditor.story.jsx b/packages/react/src/components/DashboardEditor/DashboardEditor.story.jsx
index ac44ee748f..a1be3a3b5b 100644
--- a/packages/react/src/components/DashboardEditor/DashboardEditor.story.jsx
+++ b/packages/react/src/components/DashboardEditor/DashboardEditor.story.jsx
@@ -1204,7 +1204,6 @@ export const I18N = () => (
       yCoordinateDropdownLabelText: 'yCoordinateDropdownLabelText',
       selectDataItemsText: 'selectDataItemsText',
       dataItemText: 'dataItemText',
-      editText: 'editText',
       // Hotspot Text Style Tab fields
       textTypeStyleInfoText: 'textTypeStyleInfoText',
       fontColorLabelText: 'fontColorLabelText',
@@ -1519,3 +1518,89 @@ export const withGetDefaultCard = () => {
 };
 
 withGetDefaultCard.storyName = 'With get default card';
+
+export const withHierarchyDataItems = () => {
+  const hierarchyDataItems = object('hierarchyDataItems', [
+    {
+      dataItemId: 'speed',
+      label: `speed:Device1`,
+      resourceData: {
+        type: 'DEVICE',
+        uuid: '12345',
+        deviceTypeUUId: '7890',
+      },
+    },
+    {
+      dataItemId: 'pressure',
+      label: `pressure:Asset1`,
+      resourceData: {
+        type: 'ASSET',
+        uuid: '2',
+        siteUUId: '1',
+      },
+    },
+  ]);
+  const actions = {
+    ...commonActions,
+    onAddHierarchyDataItems: (cardConfig, handleHierarchyDataItemChange) =>
+      handleHierarchyDataItemChange(hierarchyDataItems),
+    dataSeriesFormActions: {
+      ...commonActions.dataSeriesFormActions,
+      hasHierarchyDataItemsEnabled: (card) => {
+        const allowCardTypes = [
+          CARD_TYPES.TIMESERIES,
+          CARD_TYPES.BAR,
+          CARD_TYPES.VALUE,
+          CARD_TYPES.TABLE,
+          CARD_TYPES.IMAGE,
+        ];
+        return allowCardTypes.includes(card.type);
+      },
+    },
+  };
+
+  return (
+    <DashboardEditor
+      title={text('title', 'My dashboard')}
+      getValidDataItems={() => mockDataItems}
+      dataItems={mockDataItems}
+      availableImages={images}
+      i18n={{
+        headerEditTitleButton: 'Edit title updated',
+      }}
+      onAddImage={action('onAddImage')}
+      onImport={action('onImport')}
+      onExport={action('onExport')}
+      onDelete={action('onDelete')}
+      onCancel={action('onCancel')}
+      onSubmit={action('onSubmit')}
+      actions={actions}
+      onImageDelete={action('onImageDelete')}
+      onLayoutChange={action('onLayoutChange')}
+      isSubmitDisabled={boolean('isSubmitDisabled', false)}
+      isSubmitLoading={boolean('isSubmitLoading', false)}
+      availableDimensions={{
+        deviceid: ['73000', '73001', '73002'],
+        manufacturer: ['rentech', 'GHI Industries'],
+      }}
+      supportedCardTypes={array('supportedCardTypes', [
+        'TIMESERIES',
+        'SIMPLE_BAR',
+        'GROUPED_BAR',
+        'STACKED_BAR',
+        'VALUE',
+        'IMAGE',
+        'TABLE',
+        'CUSTOM',
+      ])}
+      headerBreadcrumbs={[
+        <Link href="www.ibm.com">Dashboard library</Link>,
+        <Link href="www.ibm.com">Favorites</Link>,
+      ]}
+      isLoading={boolean('isLoading', false)}
+      onCardSelect={action('onCardSelect')}
+    />
+  );
+};
+
+withHierarchyDataItems.storyName = 'with hierarchy data items';
diff --git a/packages/react/src/components/DashboardEditor/editorUtils.jsx b/packages/react/src/components/DashboardEditor/editorUtils.jsx
index d6e3606aad..a620ee99f6 100644
--- a/packages/react/src/components/DashboardEditor/editorUtils.jsx
+++ b/packages/react/src/components/DashboardEditor/editorUtils.jsx
@@ -692,6 +692,11 @@ export const DashboardEditorActionsPropTypes = PropTypes.shape({
     ]
    */
   onEditDataItem: PropTypes.func,
+  /** Call back function for on click of add hierarchy data items button, returns a selcted dataSource
+   * onAddHierarchyDataItems(cardProps: card properties, handleHierarchyDataItemChange: callback function to handle hierarchy data items change)
+   * return: void
+   */
+  onAddHierarchyDataItems: PropTypes.func,
   /** Form actions for dataSeries modal */
   dataSeriesFormActions: PropTypes.shape({
     /** callback function to determine aggregation dropdown visibility
@@ -709,6 +714,11 @@ export const DashboardEditorActionsPropTypes = PropTypes.shape({
      * return {boolean} : true or false
      */
     hasDataFilterDropdown: PropTypes.func,
+    /** callback function to determine hierarchyDataItems dropdown visibility
+     * hasHierarchyDataItemsEnabled(cardProps: card properties)
+     * return {boolean} : true or false
+     */
+    hasHierarchyDataItemsEnabled: PropTypes.func,
   }),
 });
 
@@ -717,9 +727,11 @@ const noop = () => {};
 
 export const defaultDashboardEditorActionsProps = {
   onEditDataItem: noop,
+  onAddHierarchyDataItems: noop,
   dataSeriesFormActions: {
     hasAggregationsDropDown: noop,
     hasGrainsDropDown: noop,
     hasDataFilterDropdown: noop,
+    hasHierarchyDataItemsEnabled: noop,
   },
 };
diff --git a/packages/react/src/components/HotspotEditorModal/HotspotEditorDataSourceTab/HotspotEditorDataSourceTab.jsx b/packages/react/src/components/HotspotEditorModal/HotspotEditorDataSourceTab/HotspotEditorDataSourceTab.jsx
index c362e60264..931859a50e 100644
--- a/packages/react/src/components/HotspotEditorModal/HotspotEditorDataSourceTab/HotspotEditorDataSourceTab.jsx
+++ b/packages/react/src/components/HotspotEditorModal/HotspotEditorDataSourceTab/HotspotEditorDataSourceTab.jsx
@@ -1,8 +1,10 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Edit } from '@carbon/react/icons';
 import { MultiSelect } from '@carbon/react';
 import { isEmpty } from 'lodash-es';
+import { v4 as uuidv4 } from 'uuid';
+import { MisuseOutline } from '@carbon/icons-react';
 
 import DataSeriesFormItemModal from '../../CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItemModal';
 import List from '../../List/List';
@@ -13,6 +15,9 @@ import {
   DashboardEditorActionsPropTypes,
   defaultDashboardEditorActionsProps,
 } from '../../DashboardEditor/editorUtils';
+import HierarchyDataFormItems, {
+  isHierarchyDataItem,
+} from '../../CardEditor/CardEditForm/CardEditFormItems/HierarchyDataFormItems/HierarchyDataFormItems';
 
 const { iotPrefix } = settings;
 
@@ -47,7 +52,8 @@ const propTypes = {
   i18n: PropTypes.shape({
     selectDataItemsText: PropTypes.string,
     dataItemText: PropTypes.string,
-    editText: PropTypes.string,
+    edit: PropTypes.string,
+    remove: PropTypes.string,
     dataItemEditorDataItemTitle: PropTypes.string,
     dataItemEditorDataItemCustomLabel: PropTypes.string,
     dataItemEditorDataItemUnit: PropTypes.string,
@@ -85,7 +91,8 @@ const defaultProps = {
   i18n: {
     selectDataItemsText: 'Select data items',
     dataItemText: 'Data items',
-    editText: 'Edit',
+    edit: 'Edit',
+    remove: 'Remove',
     dataItemEditorDataItemTitle: 'Data items',
     dataItemEditorDataItemCustomLabel: 'Custom label',
     dataItemEditorDataItemUnit: 'Unit',
@@ -102,10 +109,12 @@ const defaultProps = {
 };
 
 export const formatDataItemsForDropdown = (dataItems) =>
-  dataItems?.map(({ dataSourceId, label }) => ({
-    id: dataSourceId,
-    label,
-  }));
+  dataItems
+    ?.filter((dataItem) => !isHierarchyDataItem(dataItem)) // filter hierarchy data items
+    ?.map(({ dataSourceId, label }) => ({
+      id: dataSourceId,
+      label,
+    }));
 
 const HotspotEditorDataSourceTab = ({
   hotspot,
@@ -127,7 +136,6 @@ const HotspotEditorDataSourceTab = ({
   const selectedItemsArray = hotspot.content?.attributes || [];
 
   const baseClassName = `${iotPrefix}--card-edit-form`;
-  const initialSelectedItems = formatDataItemsForDropdown(selectedItemsArray);
   const { onEditDataItem } = actions;
 
   const handleSelectionChange = ({ selectedItems }) => {
@@ -135,7 +143,7 @@ const HotspotEditorDataSourceTab = ({
     // loop through  selected Items and find their selectedItemsArray object or the dataItem object with same id
     selectedItems.forEach((item) => {
       const containedItem = selectedItemsArray.find(
-        (selectedItem) => selectedItem.dataItemId === item.id
+        (selectedItem) => selectedItem.dataSourceId === item.id
       );
       const containedDataItem = dataItems.find(
         (selectedItem) => selectedItem.dataItemId === item.id
@@ -146,17 +154,37 @@ const HotspotEditorDataSourceTab = ({
         newArray.push(containedDataItem);
       }
     });
+
+    // Add existing hierarchy data items
+    newArray.push(...selectedItemsArray.filter((item) => isHierarchyDataItem(item)));
+
     onChange({ attributes: newArray });
   };
 
+  const handleHierarchyDataItemChange = useCallback(
+    (items) => {
+      const updatedItems = items?.map((item) => ({
+        ...item,
+        // create a unique dataSourceId
+        dataSourceId: `${item.dataItemId}_${uuidv4()}`,
+      }));
+
+      const selectedItems = [...selectedItemsArray, ...updatedItems];
+
+      onChange({ attributes: selectedItems });
+    },
+    [onChange, selectedItemsArray]
+  );
+
   // MultiSelect
-  // For the initial selection to work the objects in prop "initialSelectedItems"
+  // For the initial selection to work the objects in prop "selectedItemsArray"
   // must be identical to the objects in prop "items". It is not enough that the
   // ids are the same. Therefore, we must adjust the labels in "items" if they have
-  // been modified in the "initialSelectedItems".
+  // been modified in the "selectedItemsArray".
   const multiSelectItems = formatDataItemsForDropdown(dataItems).map((item) => ({
     ...item,
-    label: initialSelectedItems.find((selected) => selected.id === item.id)?.label ?? item.label,
+    label:
+      selectedItemsArray.find((selected) => selected.dataSourceId === item.id)?.label ?? item.label,
   }));
 
   const handleEditButton = useCallback(
@@ -182,6 +210,64 @@ const HotspotEditorDataSourceTab = ({
     [cardConfig, onEditDataItem, dataItems]
   );
 
+  const handleRemoveButton = useCallback(
+    (selectedItem) => {
+      const newArray = selectedItemsArray.filter(
+        (item) => item.dataSourceId !== selectedItem.dataSourceId
+      );
+
+      onChange({ attributes: newArray });
+    },
+    [selectedItemsArray, onChange]
+  );
+
+  const generateListItems = useCallback(
+    (data, isHierarchy = false) =>
+      data
+        ?.filter((dataItem) => isHierarchyDataItem(dataItem) === isHierarchy)
+        ?.map((dataItem) => ({
+          id: dataItem.dataSourceId,
+          content: {
+            value: dataItem.label,
+            rowActions: () => [
+              <Button
+                key={`data-item-${dataItem.dataSourceId}`}
+                renderIcon={Edit}
+                hasIconOnly
+                kind="ghost"
+                size="sm"
+                onClick={() => handleEditButton(dataItem)}
+                iconDescription={mergedI18n.edit}
+                tooltipPosition="left"
+                tooltipAlignment="center"
+              />,
+              <Button
+                key={`data-item-${dataItem.dataSourceId}_remove`}
+                renderIcon={MisuseOutline}
+                hasIconOnly
+                kind="ghost"
+                size="sm"
+                onClick={() => handleRemoveButton(dataItem)}
+                iconDescription={mergedI18n.remove}
+                tooltipPosition="left"
+                tooltipAlignment="center"
+              />,
+            ],
+          },
+        })),
+    [handleEditButton, handleRemoveButton, mergedI18n.edit, mergedI18n.remove]
+  );
+
+  const dataListItems = useMemo(
+    () => generateListItems(selectedItemsArray),
+    [selectedItemsArray, generateListItems]
+  );
+
+  const hierarchyDataListItems = useMemo(
+    () => generateListItems(selectedItemsArray, true),
+    [selectedItemsArray, generateListItems]
+  );
+
   return (
     <div data-testid={testID || testId}>
       <DataSeriesFormItemModal
@@ -211,7 +297,7 @@ const HotspotEditorDataSourceTab = ({
           id={`${cardConfig.id}_dataSourceIds`}
           label={mergedI18n.selectDataItemsText}
           direction="bottom"
-          initialSelectedItems={initialSelectedItems}
+          selectedItems={formatDataItemsForDropdown(selectedItemsArray)}
           items={multiSelectItems}
           light
           onChange={handleSelectionChange}
@@ -225,23 +311,14 @@ const HotspotEditorDataSourceTab = ({
         emptyState={<div />}
         testId={`${testId}-data-source-list`}
         title=""
-        items={selectedItemsArray?.map((dataItem) => ({
-          id: dataItem.dataSourceId,
-          content: {
-            value: dataItem.label,
-            rowActions: () => [
-              <Button
-                key={`data-item-${dataItem.dataSourceId}`}
-                renderIcon={Edit}
-                hasIconOnly
-                kind="ghost"
-                size="sm"
-                onClick={() => handleEditButton(dataItem)}
-                iconDescription={mergedI18n.editText}
-              />,
-            ],
-          },
-        }))}
+        items={dataListItems}
+      />
+      <HierarchyDataFormItems
+        cardConfig={cardConfig}
+        hierarchyDataItemListItems={hierarchyDataListItems}
+        handleHierarchyDataItemChange={handleHierarchyDataItemChange}
+        i18n={i18n}
+        actions={actions}
       />
     </div>
   );
diff --git a/packages/react/src/components/HotspotEditorModal/HotspotEditorDataSourceTab/HotspotEditorDataSourceTabREADME.mdx b/packages/react/src/components/HotspotEditorModal/HotspotEditorDataSourceTab/HotspotEditorDataSourceTabREADME.mdx
index 2a73e5a04a..8a31a8d123 100644
--- a/packages/react/src/components/HotspotEditorModal/HotspotEditorDataSourceTab/HotspotEditorDataSourceTabREADME.mdx
+++ b/packages/react/src/components/HotspotEditorModal/HotspotEditorDataSourceTab/HotspotEditorDataSourceTabREADME.mdx
@@ -125,7 +125,7 @@ These props can also be passed as part of the i18n prop of the HotspotModalEdito
 | :--------------------------------- | :----- | :------------------ | :---------- |
 | selectDataItemsText                | string | 'Select data items' |             |
 | dataItemText                       | string | 'Data items'        |             |
-| editText                           | string | 'Edit'              |             |
+| edit                               | string | 'Edit'              |             |
 | dataItemEditorDataItemTitle        | string | 'Data items'        |             |
 | dataItemEditorDataItemCustomLabel  | string | 'Custom label'      |             |
 | dataItemEditorDataItemUnit         | string | 'Unit'              |             |