diff --git a/src/components/Item/VisualizationItem/ItemHeaderButtons.js b/src/components/Item/VisualizationItem/ItemHeaderButtons.js
index b9985fa2a..06964af22 100644
--- a/src/components/Item/VisualizationItem/ItemHeaderButtons.js
+++ b/src/components/Item/VisualizationItem/ItemHeaderButtons.js
@@ -1,7 +1,12 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
-import { isSingleValue, isYearOverYear } from '@dhis2/analytics';
+import {
+    isSingleValue,
+    isYearOverYear,
+    VIS_TYPE_GAUGE,
+    VIS_TYPE_PIE,
+} from '@dhis2/analytics';
 import { Button, Menu, MenuItem, Divider, colors } from '@dhis2/ui-core';
 import i18n from '@dhis2/d2-i18n';
 import Popover from '@material-ui/core/Popover';
@@ -61,7 +66,11 @@ const ItemHeaderButtons = props => {
     const handleClose = () => setAnchorEl(null);
 
     const type = visualization.type || item.type;
-    const canViewAs = !isSingleValue(type) && !isYearOverYear(type);
+    const canViewAs =
+        !isSingleValue(type) &&
+        !isYearOverYear(type) &&
+        type !== VIS_TYPE_GAUGE &&
+        type !== VIS_TYPE_PIE;
 
     const interpretationMenuLabel = props.activeFooter
         ? i18n.t(`Hide interpretations and details`)
diff --git a/src/components/Item/VisualizationItem/assets/icons.js b/src/components/Item/VisualizationItem/assets/icons.js
index ea25065f8..35730b9da 100644
--- a/src/components/Item/VisualizationItem/assets/icons.js
+++ b/src/components/Item/VisualizationItem/assets/icons.js
@@ -20,6 +20,7 @@ export const SpeechBubble = () => (
         viewBox="0 0 20 20"
         width="20"
         xmlns="http://www.w3.org/2000/svg"
+        style={{ margin: '3px 2px 0 2px' }} // Temporary fix for the misaligned icon, should be removed once the icon is replaced
     >
         <path
             d="m20 2h-16c-1.1 0-1.99.9-1.99 2l-.01 18 4-4h14c1.1 0 2-.9 2-2v-12c0-1.1-.9-2-2-2zm-2 12h-12v-2h12zm0-3h-12v-2h12zm0-3h-12v-2h12z"