diff --git a/frontend/src/visualizations/components/ChartWithLegend.jsx b/frontend/src/visualizations/components/ChartWithLegend.jsx
index 9f8c654f23b4c76a406518f2351cbdf7e817538d..6d1d38e7064d0d3049ee468a878759139fdc2668 100644
--- a/frontend/src/visualizations/components/ChartWithLegend.jsx
+++ b/frontend/src/visualizations/components/ChartWithLegend.jsx
@@ -28,7 +28,7 @@ export default class ChartWithLegend extends Component {
         let chartWidth, chartHeight, flexChart = false;
         let type, LegendComponent;
         let isHorizontal = gridSize && gridSize.width > gridSize.height / GRID_ASPECT_RATIO;
-        if (!gridSize || (isHorizontal && gridSize.width > 3 && gridSize.height > 2)) {
+        if (!gridSize || (isHorizontal && (gridSize.width > 4 || gridSize.height > 4))) {
             type = "horizontal";
             LegendComponent = LegendVertical;
             if (gridSize && gridSize.width < 6) {
diff --git a/frontend/src/visualizations/components/LegendVertical.jsx b/frontend/src/visualizations/components/LegendVertical.jsx
index a8b2c8c856f58c6441ce1594e48b41a5d7f1b5c8..70ec7c9ef92683e2d73890d87ecf00fc75d06567 100644
--- a/frontend/src/visualizations/components/LegendVertical.jsx
+++ b/frontend/src/visualizations/components/LegendVertical.jsx
@@ -69,7 +69,7 @@ export default class LegendVertical extends Component {
                             isMuted={hovered && hovered.index != null && index !== hovered.index}
                             showTooltip={false}
                         />
-                        <span className={cx(styles.LegendItem, "flex-align-right", { muted: hovered && hovered.index != null && index !== hovered.index })}>{title[1]}</span>
+                        <span className={cx(styles.LegendItem, "flex-align-right pl1", { muted: hovered && hovered.index != null && index !== hovered.index })}>{title[1]}</span>
                     </li>
                 )}
                 {overflowCount > 0 ?