fix(legacy-plugin-chart-histogram): fixes legend overflow (#863)

* fix(legacy-plugin-chart-histogram): fixes legend onverflow * Update plugins/legacy-plugin-chart-histogram/src/WithLegend.jsx Co-authored-by: Ville Brofeldt <33317356+villebro@users.noreply.github.com> Co-authored-by: Ville Brofeldt <33317356+villebro@users.noreply.github.com>
apache · Nov 26, 2021 · e4ebd82 · e4ebd82
1 parent 286255d
commit e4ebd82
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/...temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-histogram/src/Histogram.jsx b/...temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-histogram/src/Histogram.jsx
@@ -81,8 +81,9 @@ class CustomHistogram extends React.PureComponent {
         width={width}
         height={height}
         position="top"
-        renderLegend={({ direction }) => (
+        renderLegend={({ direction, style }) => (
           <LegendOrdinal
+            style={style}
             scale={colorScale}
             direction={direction}
             shape="rect"

diff --git a/...emporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-histogram/src/WithLegend.jsx b/...emporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-histogram/src/WithLegend.jsx
@@ -117,13 +117,18 @@ class WithLegend extends React.Component {
       flexDirection: legendDirection,
       justifyContent: this.getLegendJustifyContent(),
     };
-
+    const legendContainerStyle = {
+      flexWrap: 'wrap',
+      display: 'flex',
+      flexDirection: legendDirection,
+    };
     return (
       <div className={`with-legend ${className}`} style={style}>
         <div className="legend-container" style={legendStyle}>
           {renderLegend({
             // Pass flexDirection for @vx/legend to arrange legend items
             direction: legendDirection,
+            style: legendContainerStyle,
           })}
         </div>
         <div className="main-container" style={chartStyle}>