diff --git a/Signum.React.Extensions/Chart/Chart.css b/Signum.React.Extensions/Chart/Chart.css
index ea0eedf386..beb011f02a 100644
--- a/Signum.React.Extensions/Chart/Chart.css
+++ b/Signum.React.Extensions/Chart/Chart.css
@@ -137,7 +137,11 @@ body.rtl .sf-chart-token .sf-query-token {
 }
 
 .sf-chart-animable .sf-transition {
-    transition: all 0.3s cubic-bezier(0.92, 0.02, 0.21, 1.01)
+    transition: all 0.3s cubic-bezier(0.92, 0.02, 0.21, 1.01), filter 0.1s linear
+}
+
+.shadow-group:hover .shadow {
+    filter: drop-shadow( 1px 1px 3px rgba(0, 0, 0, .4));
 }
 
 text.sf-initial-message {
diff --git a/Signum.React.Extensions/Chart/D3Scripts/Bars.tsx b/Signum.React.Extensions/Chart/D3Scripts/Bars.tsx
index 096358a476..0ce316dfb5 100644
--- a/Signum.React.Extensions/Chart/D3Scripts/Bars.tsx
+++ b/Signum.React.Extensions/Chart/D3Scripts/Bars.tsx
@@ -4,11 +4,12 @@ import * as ChartClient from '../ChartClient';
 import * as ChartUtils from './Components/ChartUtils';
 import { translate, scale, rotate, skewX, skewY, matrix, scaleFor } from './Components/ChartUtils';
 import { ChartRow, ChartScriptProps } from '../ChartClient';
-import TextEllipsis from './Components/TextEllipsis';
 import { XKeyTicks, YScaleTicks, YKeyTicks, XScaleTicks } from './Components/Ticks';
 import { XAxis, YAxis } from './Components/Axis';
 import { Rule } from './Components/Rule';
 import InitialMessage from './Components/InitialMessage';
+import TextIfFits from './Components/TextIfFits';
+import TextEllipsis from './Components/TextEllipsis';
 
 
 export default function renderBars({ data, width, height, parameters, loading, onDrillDown, initialLoad, chartRequest, memo, dashboardFilter }: ChartScriptProps): React.ReactElement<any> {
@@ -70,6 +71,8 @@ export default function renderBars({ data, width, height, parameters, loading, o
 
   var detector = dashboardFilter?.getActiveDetector(chartRequest);
 
+  const bandMargin = y.bandwidth() > 20 ? 2 : 0;
+
   return (
     <svg direction="ltr" width={width} height={height}>
       <g opacity={dashboardFilter ? .5 : undefined}>
@@ -79,98 +82,85 @@ export default function renderBars({ data, width, height, parameters, loading, o
 
       {/*PAINT GRAPH*/}
       <g className="shape" transform={translate(xRule.start('content'), yRule.start('content'))}>
-        {orderedRows.map(r => {
+        {keyValues.map(k => {
 
-          var active = detector?.(r);
+          var key = keyColumn.getKey(k);
 
-          var key = keyColumn.getValueKey(r);
+          var row: ChartRow | undefined = rowsByKey[key];
+          var active = detector?.(row);
 
-          return (
-            <rect key={key} className="shape sf-transition"
-              opacity={active == false ? .5 : undefined}
-              stroke={active == true ? "black" : y.bandwidth() > 4 ? '#fff' : undefined}
-              strokeWidth={active == true ? 3 : undefined}
-              transform={translate(0, y(key)!) + (initialLoad ? scale(0, 1) : scale(1, 1))}
-              width={x(valueColumn.getValue(r))}
-              height={y.bandwidth()}
-              fill={keyColumn.getValueColor(r) ?? color(key)}
-              onClick={e => onDrillDown(r, e)}
-              cursor="pointer">
-              <title>
-                {keyColumn.getValueNiceName(r) + ': ' + valueColumn.getValueNiceName(r)}
-              </title>
-            </rect>
-          );
-        })}
-      </g>
+          var posx = x(row ? valueColumn.getValue(row) : 0)!;
 
-      {y.bandwidth() > 15 &&
-        (isMargin ?
-          <g className="y-label" transform={translate(xRule.end('labels'), yRule.start('content') + y.bandwidth() / 2)}>
-            {(isAll ? keyValues : orderedRows.map(r => keyColumn.getValue(r))).map(k => <TextEllipsis key={keyColumn.getKey(k)}
-              transform={translate(0, y(keyColumn.getKey(k))!)}
-              maxWidth={xRule.size('labels')}
-              padding={labelMargin}
-              className="y-label sf-transition"
-              fill={(keyColumn.getColor(k) ?? color(keyColumn.getKey(k)))}
-              dominantBaseline="middle"
-              textAnchor="end"
-              fontWeight="bold"
-              onClick={e => onDrillDown({ c0: k }, e)}
-              cursor="pointer">
-              {keyColumn.getNiceName(k)}
-            </TextEllipsis>)}
-          </g> :
-          isInside ?
-            <g className="y-label" transform={translate(xRule.start('content') + labelMargin, yRule.start('content') + y.bandwidth() / 2)}>
-              {(isAll ? keyValues : orderedRows.map(r => keyColumn.getValue(r))).map(k => {
-
-                var row = rowsByKey[keyColumn.getKey(k)];
-
-                var posx = x(row ? valueColumn.getValue(row) : 0)!;
-                return (
-                  <TextEllipsis key={keyColumn.getKey(k)}
-                    transform={translate(posx >= size / 2 ? 0 : posx, y(keyColumn.getKey(k))!)}
-                    maxWidth={posx >= size / 2 ? posx : size - posx}
+          return (
+            <g className="shadow-group" key={key}>
+              {row && <rect className="shape sf-transition shadow"
+                opacity={active == false ? .5 : undefined}
+                transform={translate(0, y(key)! + bandMargin) + (initialLoad ? scale(0, 1) : scale(1, 1))}
+                width={x(valueColumn.getValue(row))}
+                height={y.bandwidth() - bandMargin * 2}
+                fill={keyColumn.getValueColor(row) ?? color(key)}
+                onClick={e => onDrillDown(row!, e)}
+                cursor="pointer">
+                <title>
+                  {keyColumn.getValueNiceName(row) + ': ' + valueColumn.getValueNiceName(row)}
+                </title>
+              </rect>
+              }
+              {y.bandwidth() > 15 && (isAll || row != null) &&
+                (isMargin ?
+                <g className="y-label" transform={translate(-labelMargin, y.bandwidth() / 2)}>
+                    <TextEllipsis 
+                      transform={translate(0, y(keyColumn.getKey(key))!)}
+                      maxWidth={xRule.size('labels')}
+                      padding={labelMargin}
+                      className="y-label sf-transition"
+                      fill={(keyColumn.getColor(key) ?? color(keyColumn.getKey(key)))}
+                      dominantBaseline="middle"
+                      textAnchor="end"
+                      fontWeight="bold"
+                      onClick={e => onDrillDown({ c0: key }, e)}
+                      cursor="pointer">
+                      {keyColumn.getNiceName(key)}
+                    </TextEllipsis>)
+                  </g> :
+                  isInside ?
+                  <g className="y-label" transform={translate(labelMargin, y.bandwidth() / 2)}>
+                      <TextEllipsis 
+                        transform={translate(posx >= size / 2 ? 0 : posx, y(keyColumn.getKey(key))!)}
+                        maxWidth={posx >= size / 2 ? posx : size - posx}
+                        padding={labelMargin}
+                        className="y-label sf-transition"
+                        fill={posx >= size / 2 ? '#fff' : (keyColumn.getColor(key) ?? color(keyColumn.getKey(key)))}
+                        dominantBaseline="middle"
+                        fontWeight="bold"
+                        onClick={e => onDrillDown({ c0: key }, e)}
+                        cursor="pointer">
+                        {keyColumn.getNiceName(key)}
+                      </TextEllipsis>
+                    </g> : null
+                )}
+              {y.bandwidth() > 15 && parseFloat(parameters["NumberOpacity"]) > 0 && row &&
+                <g className="numbers-label">
+                  <TextIfFits
+                    transform={translate(x(valueColumn.getValue(row))! / 2, y(keyColumn.getValueKey(row))! + y.bandwidth() / 2)}
+                    maxWidth={x(valueColumn.getValue(row))!}
                     padding={labelMargin}
-                    className="y-label sf-transition"
-                    fill={posx >= size / 2 ? '#fff' : (keyColumn.getColor(k) ?? color(keyColumn.getKey(k)))}
+                    className="number-label sf-transition"
+                    fill={parameters["NumberColor"] ?? "#000"}
                     dominantBaseline="middle"
+                    opacity={parameters["NumberOpacity"]}
+                    textAnchor="middle"
                     fontWeight="bold"
-                    onClick={e => onDrillDown({ c0: k }, e)}
+                    onClick={e => onDrillDown(row!, e)}
                     cursor="pointer">
-                    {keyColumn.getNiceName(k)}
-                  </TextEllipsis>
-                );
-              })}
-            </g> : null
-        )}
-
-      {y.bandwidth() > 15 && parseFloat(parameters["NumberOpacity"]) > 0 &&
-        <g className="numbers-label" transform={translate(xRule.start('content'), yRule.start('content'))}>
-          {orderedRows
-            .filter(r => x(valueColumn.getValue(r))! > 20)
-            .map(r => {
-              var posx = x(valueColumn.getValue(r))!;
-
-              return (<TextEllipsis key={keyColumn.getValueKey(r)}
-                transform={translate(x(valueColumn.getValue(r))! / 2, y(keyColumn.getValueKey(r))! + y.bandwidth() / 2)}
-                maxWidth={posx >= size / 2 ? posx : size - posx}
-                padding={labelMargin}
-                className="number-label sf-transition"
-                fill={parameters["NumberColor"] ?? "#000"}
-                dominantBaseline="middle"
-                opacity={parameters["NumberOpacity"]}
-                textAnchor="middle"
-                fontWeight="bold"
-                onClick={e => onDrillDown(r, e)}
-                cursor="pointer">
-                {valueColumn.getValueNiceName(r)}
-              </TextEllipsis>);
-            })}
-        </g>
-      }
-
+                    {valueColumn.getValueNiceName(row)}
+                  </TextIfFits>
+                </g>
+              }
+            </g>
+          );
+        })}
+      </g>
       <InitialMessage data={data} x={xRule.middle("content")} y={yRule.middle("content")} loading={loading} />
       <g opacity={dashboardFilter ? .5 : undefined}>
         <XAxis xRule={xRule} yRule={yRule} />
diff --git a/Signum.React.Extensions/Chart/D3Scripts/BubblePack.tsx b/Signum.React.Extensions/Chart/D3Scripts/BubblePack.tsx
index e5d83d4ca4..895e96698f 100644
--- a/Signum.React.Extensions/Chart/D3Scripts/BubblePack.tsx
+++ b/Signum.React.Extensions/Chart/D3Scripts/BubblePack.tsx
@@ -83,40 +83,40 @@ export default function renderBubblePack({ data, width, height, parameters, load
         nodes.orderByDescending(a => a.r).map(d => {
           const active = activeDetector?.(isFolder(d.data) ? ({ c2: d.data.folder }) : d.data);
           return (
-            <g key={getNodeKey(d)} className="node sf-transition" transform={translate(d.x, d.y) + (initialLoad ? scale(0, 0) : scale(1, 1))} cursor="pointer"
-            onClick={e => isFolder(d.data) ? onDrillDown({ c2: d.data.folder }, e) : onDrillDown(d.data, e)}>
-            <circle className="sf-transition" shapeRendering="initial" r={d.r}
-              opacity={active == false ? .5 : undefined}
-              fill={isFolder(d.data) ? folderColor!(d.data.folder) : color(d.data)!}
-              fillOpacity={parameters["FillOpacity"] ?? undefined}
-              stroke={active == true ? "black" : parameters["StrokeColor"] ?? (isFolder(d.data) ? folderColor!(d.data.folder) : (color(d.data) ?? undefined))}
-              strokeWidth={parameters["StrokeWidth"]} strokeOpacity={1} />
-            {!isFolder(d.data) &&
-              <TextEllipsis maxWidth={d.r * 2} padding={1} etcText=""
-                dominantBaseline="middle" textAnchor="middle" dy={showNumber && d.r > numberSizeLimit ? "-0.5em" : undefined}>
-                {keyColumn.getValueNiceName(d.data as ChartRow)}
-              </TextEllipsis>
-            }
-            {showNumber && d.r > numberSizeLimit && !isFolder(d.data) &&
-              <text fill={parameters["NumberColor"] ?? "#000"}
-                dominantBaseline="middle"
-                textAnchor="middle"
-                fontWeight="bold"
-                opacity={parseFloat(parameters["NumberOpacity"]) * d.r / 30}
-                dy=".5em">
-                {valueColumn.getValueNiceName(d.data as ChartRow)}
-              </text>
-            }
-            <title>
-              {isFolder(d.data) ? parentColumn!.getNiceName(d.data.folder) :
-                (keyColumn.getValueNiceName(d.data as ChartRow) + (parentColumn == null ? '' : (' (' + parentColumn.getValueNiceName(d.data as ChartRow) + ')')))}:
-              {isFolder(d.data) ? format(size.invert(d.value!)) :
-                (valueColumn.getValueNiceName(d.data)
-                  + (colorScaleColumn == null ? '' : (' (' + colorScaleColumn.getValueNiceName(d.data) + ')'))
-                  + (colorSchemeColumn == null ? '' : (' (' + colorSchemeColumn.getValueNiceName(d.data) + ')'))
-                )}
-            </title>
-          </g>);
+            <g key={getNodeKey(d)} className="node sf-transition shadow-group" transform={translate(d.x, d.y) + (initialLoad ? scale(0, 0) : scale(1, 1))} cursor="pointer"
+              onClick={e => isFolder(d.data) ? onDrillDown({ c2: d.data.folder }, e) : onDrillDown(d.data, e)}>
+              <circle className="sf-transition shadow" shapeRendering="initial" r={d.r}
+                opacity={active == false ? .5 : undefined}
+                fill={isFolder(d.data) ? folderColor!(d.data.folder) : color(d.data)!}
+                fillOpacity={parameters["FillOpacity"] ?? undefined}
+                stroke={active == true ? "black" : parameters["StrokeColor"] ?? (isFolder(d.data) ? folderColor!(d.data.folder) : (color(d.data) ?? undefined))}
+                strokeWidth={parameters["StrokeWidth"]} strokeOpacity={1} />
+              {!isFolder(d.data) &&
+                <TextEllipsis maxWidth={d.r * 2} padding={1} etcText=""
+                  dominantBaseline="middle" textAnchor="middle" dy={showNumber && d.r > numberSizeLimit ? "-0.5em" : undefined}>
+                  {keyColumn.getValueNiceName(d.data as ChartRow)}
+                </TextEllipsis>
+              }
+              {showNumber && d.r > numberSizeLimit && !isFolder(d.data) &&
+                <text fill={parameters["NumberColor"] ?? "#000"}
+                  dominantBaseline="middle"
+                  textAnchor="middle"
+                  fontWeight="bold"
+                  opacity={parseFloat(parameters["NumberOpacity"]) * d.r / 30}
+                  dy=".5em">
+                  {valueColumn.getValueNiceName(d.data as ChartRow)}
+                </text>
+              }
+              <title>
+                {isFolder(d.data) ? parentColumn!.getNiceName(d.data.folder) :
+                  (keyColumn.getValueNiceName(d.data as ChartRow) + (parentColumn == null ? '' : (' (' + parentColumn.getValueNiceName(d.data as ChartRow) + ')')))}:
+                {isFolder(d.data) ? format(size.invert(d.value!)) :
+                  (valueColumn.getValueNiceName(d.data)
+                    + (colorScaleColumn == null ? '' : (' (' + colorScaleColumn.getValueNiceName(d.data) + ')'))
+                    + (colorSchemeColumn == null ? '' : (' (' + colorSchemeColumn.getValueNiceName(d.data) + ')'))
+                  )}
+              </title>
+            </g>);
         })
       }
       <InitialMessage data={data} x={width / 2} y={height / 2} loading={loading} />
diff --git a/Signum.React.Extensions/Chart/D3Scripts/Bubbleplot.tsx b/Signum.React.Extensions/Chart/D3Scripts/Bubbleplot.tsx
index 35cca8d7c6..77e9937fe7 100644
--- a/Signum.React.Extensions/Chart/D3Scripts/Bubbleplot.tsx
+++ b/Signum.React.Extensions/Chart/D3Scripts/Bubbleplot.tsx
@@ -95,13 +95,13 @@ export default function renderBubbleplot({ data, width, height, parameters, load
 
           return (
             <g key={keyColumns.map(c => c.getValueKey(r)).join("/")}
-              className="shape-serie sf-transition"
+              className="shape-serie sf-transition shadow-group"
               opacity={active == false ? .5 : undefined}
               transform={translate(x(horizontalColumn.getValue(r))!, -y(verticalColumn.getValue(r))!) + (initialLoad ? scale(0, 0) : scale(1, 1))}
               cursor="pointer"
               onClick={e => onDrillDown(r, e)}
             >
-              <circle className="shape sf-transition"
+              <circle className="shape sf-transition shadow"
                 stroke={active == true ? "black" : colorKeyColumn.getValueColor(r) ?? color(r)}
                 strokeWidth={3} fill={colorKeyColumn.getValueColor(r) ?? color(r)}
                 fillOpacity={parseFloat(parameters["FillOpacity"])}
diff --git a/Signum.React.Extensions/Chart/D3Scripts/CalendarStream.tsx b/Signum.React.Extensions/Chart/D3Scripts/CalendarStream.tsx
index 2e709f9429..b3db179daf 100644
--- a/Signum.React.Extensions/Chart/D3Scripts/CalendarStream.tsx
+++ b/Signum.React.Extensions/Chart/D3Scripts/CalendarStream.tsx
@@ -231,26 +231,30 @@ export function CalendarYear({ year, rules, rowByDate, width, height, onDrillDow
       </g>
 
       <g transform={translate(rules.daysRule.start("daysContent"), rules.weeksRule.start("weeksContent"))}>
-      {d3.utcDays(new Date(Date.UTC(year, 0, 1)), new Date(Date.UTC(year + 1, 0, 1))).map(d => {
-        const r: ChartRow | undefined = rowByDate[cleanDate(d)];
-        const active = r && detector?.(r);
-        return <rect key={d.toISOString()}
-          className="sf-transition"
-          opacity={active == false ? .5 : undefined}
-          stroke={active == true ? "black" : "#ccc"}
-          strokeWidth={active == true ? 2 : undefined}
-          fill={r == undefined || initialLoad ? "#fff" : color(r)}
-          width={cellSize}
-          height={cellSize}
-          x={day(d) * cellSize}
-          y={week(d) * cellSize}
-          cursor="pointer"
-          onClick={e => r == undefined ? null : onDrillDown(r, e)}>
-          <title>
-            {dateFormat(d) + (r == undefined ? "" : ("(" + valueColumn.getValueNiceName(r) + ")"))}
-          </title>
-        </rect>
-      })}
+        {d3.utcDays(new Date(Date.UTC(year, 0, 1)), new Date(Date.UTC(year + 1, 0, 1))).map(d => {
+          const r: ChartRow | undefined = rowByDate[cleanDate(d)];
+          const active = r && detector?.(r);
+          return (
+            <g className="shadow-group" key={d.toISOString()}>
+              <rect
+                className="sf-transition shadow"
+                opacity={active == false ? .5 : undefined}
+                stroke={active == true ? "black" : "#ccc"}
+                strokeWidth={active == true ? 2 : undefined}
+                fill={r == undefined || initialLoad ? "#fff" : color(r)}
+                width={cellSize}
+                height={cellSize}
+                x={day(d) * cellSize}
+                y={week(d) * cellSize}
+                cursor="pointer"
+                onClick={e => r == undefined ? null : onDrillDown(r, e)}>
+                <title>
+                  {dateFormat(d) + (r == undefined ? "" : ("(" + valueColumn.getValueNiceName(r) + ")"))}
+                </title>
+              </rect>
+            </g>
+          )
+        })}
       </g>
 
       <g transform={translate(rules.daysRule.start("daysContent"), rules.weeksRule.start("weeksContent"))} opacity={detector ? .5 : undefined} >
diff --git a/Signum.React.Extensions/Chart/D3Scripts/Columns.tsx b/Signum.React.Extensions/Chart/D3Scripts/Columns.tsx
index ecbd595ad4..1d991107ab 100644
--- a/Signum.React.Extensions/Chart/D3Scripts/Columns.tsx
+++ b/Signum.React.Extensions/Chart/D3Scripts/Columns.tsx
@@ -2,13 +2,14 @@ import * as React from 'react'
 import * as d3 from 'd3'
 import * as ChartUtils from './Components/ChartUtils';
 import { translate, scale, rotate, skewX, skewY, matrix, scaleFor } from './Components/ChartUtils';
-import { ChartTable, ChartColumn, ChartScriptProps } from '../ChartClient';
+import { ChartTable, ChartColumn, ChartScriptProps, ChartRow } from '../ChartClient';
 import TextEllipsis from './Components/TextEllipsis';
 import { XKeyTicks, YScaleTicks, XTitle } from './Components/Ticks';
 import { XAxis, YAxis } from './Components/Axis';
 import { Rule } from './Components/Rule';
 import InitialMessage from './Components/InitialMessage';
 import type { ChartScriptHorizontalProps } from './Line';
+import TextIfFits from './Components/TextIfFits';
 
 
 export default function renderColumns({ data, width, height, parameters, loading, onDrillDown, initialLoad, chartRequest, memo, dashboardFilter }: ChartScriptProps): React.ReactElement<any> {
@@ -21,7 +22,7 @@ export default function renderColumns({ data, width, height, parameters, loading
     _1: 5,
     title: 15,
     _2: 10,
-    labels: parseInt(parameters["UnitMargin"]),
+    labels: parseInt(parameters["UnitMargin"]), 
     _3: 5,
     ticks: 4,
     content: '*',
@@ -69,7 +70,7 @@ export default function renderColumns({ data, width, height, parameters, loading
     <svg direction="ltr" width={width} height={height}>
       <g opacity={dashboardFilter ? .5 : undefined}>
         <XTitle xRule={xRule} yRule={yRule} keyColumn={keyColumn} />
-        <YScaleTicks xRule={xRule} yRule={yRule} valueColumn={valueColumn} y={y} />
+        <YScaleTicks xRule={xRule} yRule={yRule} valueColumn={valueColumn} y={y}  />
       </g>
 
       {paintColumns({ xRule, yRule, x, y, keyValues, data, parameters, initialLoad, onDrillDown, colIndex: 0, colCount: 1, memo, detector })}
@@ -113,81 +114,78 @@ export function paintColumns({ xRule, yRule, x, y, keyValues, data, parameters,
   return (
     <>
       <g className="shape" transform={translate(xRule.start('content') + bandOffset, yRule.end('content'))}>
-        {orderedRows.map(r => {
-          var active = detector?.(r);
-          var key = keyColumn.getValueKey(r);
+        {keyValues.map(k => {
+          var key = keyColumn.getKey(k);
+
+          var row: ChartRow | undefined = rowsByKey[key];
+
+          var active = detector?.(row);
+
+          const posy = y(row ? valueColumn.getValue(row) : 0)!;
 
           return (
-            <rect key={key} className="shape sf-transition"
-              opacity={active == false ? .5 : undefined}
-              stroke={active == true ? "black" : bandwidth > 4 ? '#fff' : undefined}
-              strokeWidth={active == true ? 3 : undefined}
-              transform={(initialLoad ? scale(1, 0) : scale(1, 1)) + translate(x(key)!, -y(valueColumn.getValue(r))!)}
-              height={y(valueColumn.getValue(r))}
-              width={bandwidth}
-              fill={keyColumn.getValueColor(r) ?? color(key)}
-              cursor="pointer"
-              onClick={e => onDrillDown(r, e)}>
-              <title>
-                {keyColumn.getValueNiceName(r) + ': ' + valueColumn.getValueNiceName(r)}
-              </title>
-            </rect>
+            <g className="shadow-group" key={key}>
+              {row && <rect className="shape sf-transition shadow"
+                opacity={active == false ? .5 : undefined}
+                transform={(initialLoad ? scale(1, 0) : scale(1, 1)) + translate(x(key)!, -y(valueColumn.getValue(row))!)}
+                height={y(valueColumn.getValue(row))}
+                width={bandwidth}
+                fill={keyColumn.getValueColor(row) ?? color(key)}
+                cursor="pointer"
+                onClick={e => onDrillDown(row!, e)}>
+                <title>
+                  {keyColumn.getValueNiceName(row) + ': ' + valueColumn.getValueNiceName(row)}
+                </title>
+              </rect>}
+              {bandwidth > 15 &&
+                (isMargin ?
+                  <g className="x-label" transform={translate(0, labelMargin)} >
+                    <TextEllipsis maxWidth={yRule.size('labels')} padding={labelMargin} className="x-label sf-transition"
+                      transform={translate(x(keyColumn.getKey(key))! + bandwidth / 2, 0) + rotate(-90)}
+                      dominantBaseline="middle"
+                      fontWeight="bold"
+                      fill={(keyColumn.getColor(key) ?? color(keyColumn.getKey(key)))}
+                      textAnchor="end"
+                      cursor="pointer"
+                      onClick={e => onDrillDown({ c1: key }, e)}>
+                      {keyColumn.getNiceName(key)}
+                    </TextEllipsis>
+                  </g> :
+                  isInside ?
+                    <g className="x-label" >
+                      <TextEllipsis
+                        maxWidth={posy >= size / 2 ? posy : size - posy} padding={labelMargin} className="x-label sf-transition"
+                        transform={translate(x(keyColumn.getKey(key))! + bandwidth / 2, -posy) + rotate(-90)}
+                        dominantBaseline="middle"
+                        fontWeight="bold"
+                        fill={posy >= size / 2 ? '#fff' : (keyColumn.getColor(key) ?? color(keyColumn.getKey(key)))}
+                        dx={posy >= size / 2 ? -labelMargin : labelMargin}
+                        textAnchor={posy >= size / 2 ? 'end' : 'start'}
+                        onClick={e => onDrillDown({ c0: key }, e)}
+                        cursor="pointer">
+                        {keyColumn.getNiceName(key)}
+                      </TextEllipsis>
+                    </g> : null
+                )}
+              {parseFloat(parameters["NumberOpacity"]) > 0 && bandwidth > 15 && row &&
+                <g className="numbers-label" >
+                  <TextIfFits className="number-label sf-transition"
+                    transform={translate(x(keyColumn.getValueKey(row))! + bandwidth / 2, -y(valueColumn.getValue(row))! / 2) + rotate(-90)}
+                    maxWidth={y(valueColumn.getValue(row))!}
+                    fill={parameters["NumberColor"] ?? "#000"}
+                    dominantBaseline="middle"
+                    opacity={parameters["NumberOpacity"]}
+                    textAnchor="middle"
+                    fontWeight="bold"
+                    cursor="pointer"
+                    onClick={e => onDrillDown(row!, e)}>
+                    {valueColumn.getValueNiceName(row)}
+                  </TextIfFits>
+                </g>}
+            </g>
           );
         })}
       </g>
-
-      {bandwidth > 15 &&
-        (isMargin ?
-          <g className="x-label" transform={translate(xRule.start('content') + bandOffset, yRule.start('labels'))}>
-            {(isAll ? keyValues : orderedRows.map(r => keyColumn.getValue(r))).map(k => < TextEllipsis key={keyColumn.getKey(k)} maxWidth={yRule.size('labels')} padding={labelMargin} className="x-label sf-transition"
-              transform={translate(x(keyColumn.getKey(k))! + bandwidth / 2, 0) + rotate(-90)}
-              dominantBaseline="middle"
-              fontWeight="bold"
-              fill={(keyColumn.getColor(k) ?? color(keyColumn.getKey(k)))}
-              textAnchor="end"
-              cursor="pointer"
-              onClick={e => onDrillDown({ c1: k }, e)}>
-              {keyColumn.getNiceName(k)}
-            </TextEllipsis>)}
-          </g> :
-          isInside ?
-            <g className="x-label" transform={translate(xRule.start('content') + bandOffset, yRule.end('content'))}>
-              {(isAll ? keyValues : orderedRows.map(r => keyColumn.getValue(r))).map(k => {
-                const row = rowsByKey[keyColumn.getKey(k)];
-                const posy = y(row ? valueColumn.getValue(row) : 0)!;
-                return (
-                  <TextEllipsis key={keyColumn.getKey(k)} maxWidth={posy >= size / 2 ? posy : size - posy} padding={labelMargin} className="x-label sf-transition"
-                    transform={translate(x(keyColumn.getKey(k))! + bandwidth / 2, -posy) + rotate(-90)}
-                    dominantBaseline="middle"
-                    fontWeight="bold"
-                    fill={posy >= size / 2 ? '#fff' : (keyColumn.getColor(k) ?? color(keyColumn.getKey(k)))}
-                    dx={posy >= size / 2 ? -labelMargin : labelMargin}
-                    textAnchor={posy >= size / 2 ? 'end' : 'start'}
-                    onClick={e => onDrillDown({ c0: k }, e)}
-                    cursor="pointer">
-                    {keyColumn.getNiceName(k)}
-                  </TextEllipsis>);
-              })}
-            </g> : null
-        )}
-
-      {parseFloat(parameters["NumberOpacity"]) > 0 && bandwidth > 15 &&
-        <g className="numbers-label" transform={translate(xRule.start('content') + bandOffset, yRule.end('content'))}>
-          {orderedRows
-            .filter(r => y(valueColumn.getValue(r))! > 10)
-            .map(r => <text key={keyColumn.getValueKey(r)} className="number-label sf-transition"
-              transform={translate(x(keyColumn.getValueKey(r))! + bandwidth / 2, -y(valueColumn.getValue(r))! / 2) + rotate(-90)}
-              fill={parameters["NumberColor"] ?? "#000"}
-              dominantBaseline="middle"
-              opacity={parameters["NumberOpacity"]}
-              textAnchor="middle"
-              fontWeight="bold"
-              cursor="pointer"
-              onClick={e => onDrillDown(r, e)}>
-              {valueColumn.getValueNiceName(r)}
-            </text>)}
-        </g>}
-
     </>
   );
 }
diff --git a/Signum.React.Extensions/Chart/D3Scripts/Components/TextIfFits.tsx b/Signum.React.Extensions/Chart/D3Scripts/Components/TextIfFits.tsx
new file mode 100644
index 0000000000..ae971bee5f
--- /dev/null
+++ b/Signum.React.Extensions/Chart/D3Scripts/Components/TextIfFits.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react'
+
+export interface TextIfFitsProps extends React.SVGProps<SVGTextElement>{
+  maxWidth: number;
+  padding?: number;
+  etcText?: string;
+}
+
+export default function TextIfFits({ maxWidth, padding, children, etcText, ...atts } :  TextIfFitsProps) {
+
+  const txt = React.useRef<SVGTextElement>(null);
+
+  React.useEffect(() => {
+    var width = maxWidth;
+    if (padding)
+      width -= padding * 2;
+
+    let txtElem = txt.current!;
+    txtElem.textContent = getString(children);
+    let textLength = txtElem.getComputedTextLength();
+    console.log("Width:", width, " textLength:", textLength, " text: ", txtElem.textContent);
+    if (textLength > width)
+      txtElem.textContent = "";
+  }, [maxWidth, padding, etcText, getString(children)]);
+
+  return (
+    <text ref={txt} {...atts} >
+      {children ?? ""}
+    </text>
+  );
+}
+
+function getString(children: React.ReactNode) {
+  return React.Children.toArray(children)[0] as string;
+}
diff --git a/Signum.React.Extensions/Chart/D3Scripts/Components/Ticks.tsx b/Signum.React.Extensions/Chart/D3Scripts/Components/Ticks.tsx
index 93f69b637f..4585edab49 100644
--- a/Signum.React.Extensions/Chart/D3Scripts/Components/Ticks.tsx
+++ b/Signum.React.Extensions/Chart/D3Scripts/Components/Ticks.tsx
@@ -11,7 +11,7 @@ export function YScaleTicks({ xRule, yRule, valueColumn, y, format }: { xRule: R
   var availableHeight = yRule.size("content");
 
   var yTicks = y.ticks(availableHeight / 50);
-  var yTickFormat = format ?? y.tickFormat(availableHeight / 50);
+  var yTickFormat = format ?? valueColumn.getNiceName; //  y.tickFormat(availableHeight / 50);
 
   return (
     <>
@@ -30,12 +30,13 @@ export function YScaleTicks({ xRule, yRule, valueColumn, y, format }: { xRule: R
       </g>
 
       <g className="y-label-group" transform={translate(xRule.end('labels'), yRule.end('content'))}>
-        {yTicks.map(t => <text key={t} className="y-label sf-transition"
+        {yTicks.map(t => <TextEllipsis key={t} className="y-label sf-transition"
           transform={translate(0, -y(t)!)}
+          maxWidth={xRule.end('labels')}
           dominantBaseline="middle"
           textAnchor="end">
           {yTickFormat(t)}
-        </text>)}
+        </TextEllipsis>)}
       </g>
 
       <g className="y-title-group" transform={translate(xRule.middle('title'), yRule.middle('content')) + rotate(270)}>
@@ -91,7 +92,7 @@ export function XScaleTicks({ xRule, yRule, valueColumn, x, format }: { xRule: R
   var availableWidth = yRule.size("content");
 
   var xTicks = x.ticks(availableWidth / 50);
-  var xTickFormat = format ?? x.tickFormat(availableWidth / 50);
+  var xTickFormat = format ?? valueColumn.getNiceName;//  x.tickFormat(availableWidth / 50);
 
   return (
     <>
diff --git a/Signum.React.Extensions/Chart/D3Scripts/Line.tsx b/Signum.React.Extensions/Chart/D3Scripts/Line.tsx
index 31acda7578..1b94900e09 100644
--- a/Signum.React.Extensions/Chart/D3Scripts/Line.tsx
+++ b/Signum.React.Extensions/Chart/D3Scripts/Line.tsx
@@ -65,8 +65,9 @@ export default function renderLine({ data, width, height, parameters, loading, c
 
       <XKeyTicks xRule={xRule} yRule={yRule} keyValues={keyValues} keyColumn={keyColumn} x={x} showLines={x.bandwidth() > 5} isActive={detector && (val => detector!({ c0: val }))} onDrillDown={(v, e) => onDrillDown({ c0: v }, e)} />
       <g opacity={dashboardFilter ? .5 : undefined}>
-        <YScaleTicks xRule={xRule} yRule={yRule} valueColumn={valueColumn} y={y} />
+        <YScaleTicks xRule={xRule} yRule={yRule} valueColumn={valueColumn} y={y}  />
       </g>
+
       {paintLine({ xRule, yRule, x, y, keyValues, data, parameters, onDrillDown, initialLoad, memo, detector })}
 
       <InitialMessage data={data} x={xRule.middle("content")} y={yRule.middle("content")} loading={loading} />
@@ -168,47 +169,43 @@ export function paintLine({ xRule, yRule, x, y, keyValues, data, parameters, onD
             var row = rowByKey[key];
             var active = detector?.(row);
             return (
-              <circle key={key}
-                transform={translate(x(key)!, -y(valueColumn.getValue(r))!)}
-                className="point sf-transition"
-                opacity={active == false ? .5 : undefined}
-                stroke={active == true ? "black" : color}
-                strokeWidth={active == true ? 3 : circleStroke}
-                fill="white"
-                r={circleRadius}
-                onClick={e => onDrillDown(row, e)}
-                cursor="pointer"
-                shapeRendering="initial">
-                <title>
-                  {keyColumn.getValueNiceName(r) + ': ' + valueColumn.getValueNiceName(r)}
-                </title>
-              </circle>
+              <g className="shadow-group" key={key}>
+                <circle
+                  transform={translate(x(key)!, -y(valueColumn.getValue(r))!)}
+                  className="point sf-transition shadow"
+                  opacity={active == false ? .5 : undefined}
+                  stroke={active == true ? "black" : color}
+                  strokeWidth={active == true ? 3 : circleStroke}
+                  fill="white"
+                  r={circleRadius}
+                  onClick={e => onDrillDown(row, e)}
+                  cursor="pointer"
+                  shapeRendering="initial">
+                  <title>
+                    {keyColumn.getValueNiceName(r) + ': ' + valueColumn.getValueNiceName(r)}
+                  </title>
+                </circle>
+                { /*Point labels*/
+                  numberOpacity > 0 &&
+                  <g className="point-label" >
+                    <text transform={translate(x(key)!, -y(valueColumn.getValue(r))! - 10)}
+                      className="point-label sf-transition"
+                      r={5}
+                      opacity={active == false ? .5 : active == true ? 1 : numberOpacity}
+                      textAnchor="middle"
+                      onClick={e => onDrillDown(r, e)}
+                      cursor="pointer"
+                      shapeRendering="initial">
+                      {valueColumn.getValueNiceName(r)}
+                    </text>)
+                  </g>
+                }
+
+              </g>
             );
           })}
       </g>
       }
-
-      { /*Point labels*/
-        numberOpacity > 0 &&
-        <g className="point-label" transform={translate(xRule.start('content') + (x.bandwidth() / 2), yRule.end('content'))}>
-          {orderedRows
-            .map(r => {
-              var key = keyColumn.getValueKey(r);
-              var row = rowByKey[key];
-              var active = detector?.(row);
-              return (<text key={key} transform={translate(x(key)!, -y(valueColumn.getValue(r))! - 10)}
-                className="point-label sf-transition"
-                r={5}
-                opacity={active == false ? .5: active == true ? 1 : numberOpacity}
-                textAnchor="middle"
-                onClick={e => onDrillDown(r, e)}
-                cursor="pointer"
-                shapeRendering="initial">
-                {valueColumn.getValueNiceName(r)}
-              </text>)
-            })}
-        </g>
-      }
     </>
   );
 }
diff --git a/Signum.React.Extensions/Chart/D3Scripts/MultiBars.tsx b/Signum.React.Extensions/Chart/D3Scripts/MultiBars.tsx
index cca096dadb..3c236e27ad 100644
--- a/Signum.React.Extensions/Chart/D3Scripts/MultiBars.tsx
+++ b/Signum.React.Extensions/Chart/D3Scripts/MultiBars.tsx
@@ -10,6 +10,7 @@ import { XScaleTicks, YKeyTicks } from './Components/Ticks';
 import { XAxis, YAxis } from './Components/Axis';
 import { Rule } from './Components/Rule';
 import InitialMessage from './Components/InitialMessage';
+import TextIfFits from './Components/TextIfFits';
 
 
 export default function renderMultiBars({ data, width, height, parameters, loading, onDrillDown, initialLoad, chartRequest, memo, dashboardFilter }: ChartScriptProps): React.ReactElement<any> {
@@ -102,48 +103,48 @@ export default function renderMultiBars({ data, width, height, parameters, loadi
 
 
               return (
-                <rect key={key} className="shape sf-transition"
-                  opacity={active == false ? .5 : undefined}
-                  stroke={active == true ? "black" : ySubscale.bandwidth() > 4 ? '#fff' : undefined}
-                  strokeWidth={active == true ? 3 : undefined}
-                  fill={s.color || color(s.key)}
-                  transform={translate(0, -y(key)! - ySubscale(s.key)! - ySubscale.bandwidth()) + (initialLoad ? scale(0, 1) : scale(1, 1))}
-                  height={ySubscale.bandwidth()}
-                  width={x(row.value)}
-                  onClick={e => onDrillDown(row.rowClick, e)}
-                  cursor="pointer">
-                  <title>
-                    {row.valueTitle}
-                  </title>
-                </rect>
+                <g className="shadow-group" key={key}>
+                  <rect className="shape sf-transition shadow"
+                    opacity={active == false ? .5 : undefined}
+                    fill={s.color || color(s.key)}
+                    transform={translate(0, -y(key)! - ySubscale(s.key)! - ySubscale.bandwidth()) + (initialLoad ? scale(0, 1) : scale(1, 1))}
+                    height={ySubscale.bandwidth()}
+                    width={x(row.value)}
+                    onClick={e => onDrillDown(row.rowClick, e)}
+                    cursor="pointer">
+                    <title>
+                      {row.valueTitle}
+                    </title>
+                  </rect>
+                  {
+                    ySubscale.bandwidth() > 15 && parseFloat(parameters["NumberOpacity"]) > 0 &&
+                    <TextIfFits className="number-label sf-transition"
+                      maxWidth={x(r.values[s.key]?.value)}
+                      transform={translate(
+                        x(r.values[s.key]?.value)! / 2,
+                        -y(keyColumn.getKey(r.rowValue))! - ySubscale(s.key)! - ySubscale.bandwidth() / 2
+                      )}
+                      onClick={e => onDrillDown(r.values[s.key].rowClick, e)}
+                      opacity={parameters["NumberOpacity"]}
+                      fill={parameters["NumberColor"]}
+                      dominantBaseline="middle"
+                      textAnchor="middle"
+                      fontWeight="bold">
+                      {r.values[s.key].valueNiceName}
+                      <title>
+                        {r.values[s.key].valueTitle}
+                      </title>
+                    </TextIfFits>
+                  }
+
+                </g>
               )
             })
         }
 
-        {
-          ySubscale.bandwidth() > 15 && parseFloat(parameters["NumberOpacity"]) > 0 &&
-          rowsInOrder
-            .filter(r => r.values[s.key] != undefined && x(r.values[s.key] && r.values[s.key].value)! > 16)
-            .map(r => <text key={keyColumn.getKey(r.rowValue)} className="number-label sf-transition"
-              transform={translate(
-                x(r.values[s.key]?.value)! / 2,
-                -y(keyColumn.getKey(r.rowValue))! - ySubscale(s.key)! - ySubscale.bandwidth() / 2
-              )}
-              onClick={e => onDrillDown(r.values[s.key].rowClick, e)}
-              opacity={parameters["NumberOpacity"]}
-              fill={parameters["NumberColor"]}
-              dominantBaseline="middle"
-              textAnchor="middle"
-              fontWeight="bold">
-              {r.values[s.key].valueNiceName}
-              <title>
-                {r.values[s.key].valueTitle}
-              </title>
-            </text>)
-        }
       </g>)}
 
-      <Legend pivot={pivot} xRule={xRule} yRule={yRule} color={color} isActive={c.c1 && detector && (row => detector!({ c1: row.value }))} onDrillDown={c.c1 && ((s, e) => onDrillDown({ c1: s.value }, e))}/>
+      <Legend pivot={pivot} xRule={xRule} yRule={yRule} color={color} isActive={c.c1 && detector && (row => detector!({ c1: row.value }))} onDrillDown={c.c1 && ((s, e) => onDrillDown({ c1: s.value }, e))} />
 
       <InitialMessage data={data} x={xRule.middle("content")} y={yRule.middle("content")} loading={loading} />
       <g opacity={dashboardFilter ? .5 : undefined}>
diff --git a/Signum.React.Extensions/Chart/D3Scripts/MultiColumns.tsx b/Signum.React.Extensions/Chart/D3Scripts/MultiColumns.tsx
index c739d2b1a1..6293982240 100644
--- a/Signum.React.Extensions/Chart/D3Scripts/MultiColumns.tsx
+++ b/Signum.React.Extensions/Chart/D3Scripts/MultiColumns.tsx
@@ -10,6 +10,7 @@ import Legend from './Components/Legend';
 import { XAxis, YAxis } from './Components/Axis';
 import { Rule } from './Components/Rule';
 import InitialMessage from './Components/InitialMessage';
+import TextIfFits from './Components/TextIfFits';
 
 
 export default function renderMultiColumns({ data, width, height, parameters, loading, onDrillDown, initialLoad, chartRequest, memo, dashboardFilter }: ChartClient.ChartScriptProps): React.ReactElement<any> {
@@ -99,48 +100,48 @@ export default function renderMultiColumns({ data, width, height, parameters, lo
             var key = keyColumn.getKey(r.rowValue);
 
             return (
-              <rect key={key}
-                className="shape sf-transition"
-                opacity={active == false ? .5 : undefined}
-                stroke={active == true ? "black" : xSubscale.bandwidth() > 4 ? '#fff' : undefined}
-                strokeWidth={active == true ? 3 : undefined}
-                fill={s.color || color(s.key)}
-                transform={(initialLoad ? scale(1, 0) : scale(1, 1)) + translate(
-                  x(key)! + xSubscale(s.key)!,
-                  - y(row.value)!
-                )}
-                width={xSubscale.bandwidth()}
-                height={y(row.value)}
-                onClick={e => onDrillDown(row.rowClick, e)}
-                cursor="pointer">
-                <title>
-                  {row.valueTitle}
-                </title>
-              </rect>
+              <g className="shadow-group" key={key}>
+                <rect
+                  className="shape sf-transition shadow"
+                  opacity={active == false ? .5 : undefined}
+                  fill={s.color || color(s.key)}
+                  transform={(initialLoad ? scale(1, 0) : scale(1, 1)) + translate(
+                    x(key)! + xSubscale(s.key)!,
+                    - y(row.value)!
+                  )}
+                  width={xSubscale.bandwidth()}
+                  height={y(row.value)}
+                  onClick={e => onDrillDown(row.rowClick, e)}
+                  cursor="pointer">
+                  <title>
+                    {row.valueTitle}
+                  </title>
+                </rect>
+
+                {x.bandwidth() > 15 && parseFloat(parameters["NumberOpacity"]) > 0 &&
+                  <TextIfFits className="number-label sf-transition"
+                    transform={translate(
+                      x(keyColumn.getKey(r.rowValue))! + xSubscale.bandwidth() / 2 + xSubscale(s.key)!,
+                      - y(r.values[s.key].value)! / 2
+                    ) + rotate(-90)}
+                    maxWidth={y(r.values[s.key].value)}
+                    onClick={e => onDrillDown(r.values[s.key].rowClick, e)}
+                    opacity={parameters["NumberOpacity"]}
+                    fill={parameters["NumberColor"]}
+                    dominantBaseline="middle"
+                    textAnchor="middle"
+                    fontWeight="bold">
+                    {r.values[s.key].valueNiceName}
+                    <title>
+                      {r.values[s.key].valueTitle}
+                    </title>
+                  </TextIfFits>
+                }
+
+              </g>
             );
           })}
 
-        {x.bandwidth() > 15 && parseFloat(parameters["NumberOpacity"]) > 0 &&
-          rowsInOrder
-            .filter(r => r.values[s.key] != undefined && y(r.values[s.key].value)! > 10)
-            .map(r => <text key={keyColumn.getKey(r.rowValue)}
-              className="number-label sf-transition"
-              transform={translate(
-                x(keyColumn.getKey(r.rowValue))! + xSubscale.bandwidth() / 2 + xSubscale(s.key)!,
-                - y(r.values[s.key].value)! / 2
-              )}
-              onClick={e => onDrillDown(r.values[s.key].rowClick, e)}
-              opacity={parameters["NumberOpacity"]}
-              fill={parameters["NumberColor"]}
-              dominantBaseline="middle"
-              textAnchor="middle"
-              fontWeight="bold">
-              {r.values[s.key].valueNiceName}
-              <title>
-                {r.values[s.key].valueTitle}
-              </title>
-            </text>)
-        }
       </g>
       )}
 
diff --git a/Signum.React.Extensions/Chart/D3Scripts/MultiLines.tsx b/Signum.React.Extensions/Chart/D3Scripts/MultiLines.tsx
index e91efcd897..6977c3089c 100644
--- a/Signum.React.Extensions/Chart/D3Scripts/MultiLines.tsx
+++ b/Signum.React.Extensions/Chart/D3Scripts/MultiLines.tsx
@@ -165,44 +165,35 @@ export default function renderMultiLines({ data, width, height, parameters, load
                 var key = keyColumn.getKey(r.rowValue);
 
                 return (
-                  <circle key={key} className="point sf-transition"
-                    opacity={active == false ? .5 : undefined}
-                    stroke={active == true ? "black" : s.color || color(s.key)}
-                    strokeWidth={active == true ? 3 : circleStroke}
-                    fill="white"
-                    transform={(initialLoad ? scale(1, 0) : scale(1, 1)) + translate(x(key)!, -y(row.value)!)}
-                    r={circleRadius}
-                    shapeRendering="initial"
-                    onClick={e => onDrillDown(row.rowClick, e)}
-                    cursor="pointer">
-                    <title>
-                      {row.valueTitle}
-                    </title>
-                  </circle>
+                  <g className="shadow-group" key={key}>
+                    <circle className="point sf-transition shadow"
+                      opacity={active == false ? .5 : undefined}
+                      stroke={active == true ? "black" : s.color || color(s.key)}
+                      strokeWidth={active == true ? 3 : circleStroke}
+                      fill="white"
+                      transform={(initialLoad ? scale(1, 0) : scale(1, 1)) + translate(x(key)!, -y(row.value)!)}
+                      r={circleRadius}
+                      shapeRendering="initial"
+                      onClick={e => onDrillDown(row.rowClick, e)}
+                      cursor="pointer">
+                      <title>
+                        {row.valueTitle}
+                      </title>
+                    </circle>
+                    {numberOpacity > 0 &&
+                      <text className="point-label sf-transition"
+                        textAnchor="middle"
+                        opacity={active == false ? .5 : active == true ? 1 : numberOpacity}
+                        transform={translate(x(keyColumn.getKey(r.rowValue))!, -y(row.value)! - 8)}
+                        onClick={e => onDrillDown(row.rowClick, e)}
+                        cursor="pointer"
+                        shapeRendering="initial">
+                        {row.valueNiceName}
+                      </text>
+                    }
+                  </g>
                 );
               })}
-            {numberOpacity > 0 &&
-              rowsInOrder
-                .map(r => {
-
-                  var row = r.values[s.key];
-                  if (row == null)
-                    return undefined;
-
-                  var active = detector?.(row.rowClick);
-                  return (
-                    <text key={keyColumn.getKey(r.rowValue)} className="point-label sf-transition"
-                      textAnchor="middle"
-                      opacity={active == false ? .5 : active == true ? 1 : numberOpacity}
-                      transform={translate(x(keyColumn.getKey(r.rowValue))!, -y(row.value)! - 8)}
-                      onClick={e => onDrillDown(row.rowClick, e)}
-                      cursor="pointer"
-                      shapeRendering="initial">
-                      {row.valueNiceName}
-                    </text>
-                  );
-                })
-            }
           </g>
         )
       }
diff --git a/Signum.React.Extensions/Chart/D3Scripts/Pie.tsx b/Signum.React.Extensions/Chart/D3Scripts/Pie.tsx
index 0a29666c47..1d85e3cdc5 100644
--- a/Signum.React.Extensions/Chart/D3Scripts/Pie.tsx
+++ b/Signum.React.Extensions/Chart/D3Scripts/Pie.tsx
@@ -6,6 +6,7 @@ import { translate, scale, rotate, skewX, skewY, matrix, scaleFor } from './Comp
 import { ChartRow, ChartTable } from '../ChartClient';
 import InitialMessage from './Components/InitialMessage';
 import { KeyCodes } from '@framework/Components';
+import { TextRectangle } from './StackedLines';
 
 export default function renderPie({ data, width, height, parameters, loading, onDrillDown, initialLoad, memo, chartRequest, dashboardFilter }: ChartClient.ChartScriptProps): React.ReactElement<any> {
 
@@ -41,9 +42,7 @@ export default function renderPie({ data, width, height, parameters, loading, on
     .outerRadius(outerRadious)
     .innerRadius(rInner);
 
-  var cx = (width / 2),
-    cy = (height / 2),
-    legendRadius = 1.2;
+  var legendRadius = 1.2;
 
   var detector = dashboardFilter?.getActiveDetector(chartRequest);
 
@@ -53,10 +52,13 @@ export default function renderPie({ data, width, height, parameters, loading, on
     <svg direction="ltr" width={width} height={height}>
       <g className="shape" transform={translate(width / 2, height / 2)}>
         {orderedPie.map(slice => {
+          var active = detector?.(slice.data);
+          var m = (slice.endAngle + slice.startAngle) / 2;
+          var cuadr = Math.floor(12 * m / (2 * Math.PI));
           var active = detector?.(slice.data);
           return (
-            <g key={slice.index} className="slice">
-              <path className="shape sf-transition" d={arc(slice)!}
+            <g key={slice.index} className="slice shadow-group">
+              <path className="shape sf-transition shadow" d={arc(slice)!}
                 opacity={active == false ? .5 : undefined}
                 stroke={active == true ? "black" : undefined}
                 strokeWidth={active == true ? 3 : undefined}
@@ -64,37 +66,31 @@ export default function renderPie({ data, width, height, parameters, loading, on
                 fill={keyColumn.getValueColor(slice.data) ?? color(keyColumn.getValueKey(slice.data))}
                 shapeRendering="initial"
                 onClick={e => onDrillDown(slice.data, e)} cursor="pointer">
-                <title>
+                <div className="bg-success ">
                   {keyColumn.getValueNiceName(slice.data) + ': ' + valueColumn.getValueNiceName(slice.data)}
-                </title>
+                </div>
               </path>
+              <g key={slice.index} className="color-legend">
+                <TextRectangle className="color-legend sf-chart-strong sf-transition"
+                  rectangleAtts={{fill: "transparent"}}
+                  transform={translate(
+                    Math.sin(m) * outerRadious * legendRadius,
+                    -Math.cos(m) * outerRadious * legendRadius)}
+                  opacity={active == false ? .5 : undefined}
+                  textAnchor='middle'
+                  dominantBaseline="middle"
+                  fontWeight={active == true ? "bold" : undefined}
+                  fill={keyColumn.getValueColor(slice.data) ?? color(keyColumn.getValueKey(slice.data))}
+                  onClick={e => onDrillDown(slice.data, e)} cursor="pointer">
+                  {((slice.endAngle - slice.startAngle) < (Math.PI / 16)) ? '' : pValueAsPercent == "Yes" ?
+                    `${keyColumn.getValueNiceName(slice.data)} : ${Number(valueColumn.getValue(slice.data) / dataTotal).toLocaleString(undefined, { style: 'percent', minimumFractionDigits: 1 })}` :
+                    keyColumn.getValueNiceName(slice.data)}
+                </TextRectangle>
+              </g>
             </g>
           );
         })}
       </g>
-      <g className="color-legend" transform={translate(cx, cy)}>
-        {orderedPie.orderBy(r => keyColumn.getValueKey(r.data)).map(slice => {
-
-          var m = (slice.endAngle + slice.startAngle) / 2;
-          var cuadr = Math.floor(12 * m / (2 * Math.PI));
-          var active = detector?.(slice.data);
-          return <g key={slice.index} className="color-legend">
-            <text className="color-legend sf-chart-strong sf-transition"
-              transform={translate(
-                Math.sin(m) * outerRadious * legendRadius,
-                -Math.cos(m) * outerRadious * legendRadius)}
-              opacity={active == false ? .5 : undefined}
-              textAnchor={(1 <= cuadr && cuadr <= 4) ? 'start' : (7 <= cuadr && cuadr <= 10) ? 'end' : 'middle'}
-              fontWeight={active == true ? "bold" : undefined}
-              fill={keyColumn.getValueColor(slice.data) ?? color(keyColumn.getValueKey(slice.data))}
-              onClick={e => onDrillDown(slice.data, e)} cursor="pointer">
-              {((slice.endAngle - slice.startAngle) < (Math.PI / 16)) ? '' : pValueAsPercent == "Yes" ?
-                `${keyColumn.getValueNiceName(slice.data)} : ${Number(valueColumn.getValue(slice.data) / dataTotal).toLocaleString(undefined, { style: 'percent', minimumFractionDigits: 1 })}` :
-                keyColumn.getValueNiceName(slice.data)}
-            </text>
-          </g>;
-        })}
-      </g>
       <InitialMessage data={data} x={width / 2} y={height / 2} loading={loading} />
     </svg>
   );
diff --git a/Signum.React.Extensions/Chart/D3Scripts/Punchcard.tsx b/Signum.React.Extensions/Chart/D3Scripts/Punchcard.tsx
index befb7a90cf..cec0a192b9 100644
--- a/Signum.React.Extensions/Chart/D3Scripts/Punchcard.tsx
+++ b/Signum.React.Extensions/Chart/D3Scripts/Punchcard.tsx
@@ -132,7 +132,7 @@ export default function renderPunchcard({ data, width, height, parameters, loadi
 
       return {
         numberOpacity: n => { return area(n)! / (15 * 15); },
-        renderer: r => <circle
+        renderer: r => <circle 
           transform={translate(
             x(horizontalColumn.getValueKey(r))!,
             -y(verticalColumn.getValueKey(r))!
@@ -184,7 +184,7 @@ export default function renderPunchcard({ data, width, height, parameters, loadi
   
   var mainShape = configureShape(sizeColumn, r => sizeColumn ? sizeColumn.getValue(r) : 0,
     r => ({
-      className:"punch sf-transition",
+      className:"punch sf-transition shadow",
       shapeRendering: "initial",
       fillOpacity: fillOpacity(r),
       fill: color == null ? (parameters["FillColor"] ?? 'black') : color(colorColumn!.getValue(r)),
@@ -225,7 +225,7 @@ export default function renderPunchcard({ data, width, height, parameters, loadi
           .map(r => {
             const active = detector?.(r);
             return (
-              <g key={horizontalColumn.getValueKey(r) + "-" + verticalColumn.getValueKey(r)} className="chart-groups sf-transition"
+              <g key={horizontalColumn.getValueKey(r) + "-" + verticalColumn.getValueKey(r)} className="chart-groups sf-transition shadow-group"
                 cursor="pointer"
                 opacity={active == false ? .5 : undefined}
                 onClick={e => onDrillDown(r, e)}>
diff --git a/Signum.React.Extensions/Chart/D3Scripts/Scatterplot.tsx b/Signum.React.Extensions/Chart/D3Scripts/Scatterplot.tsx
index 6f19810b87..5d770f76a8 100644
--- a/Signum.React.Extensions/Chart/D3Scripts/Scatterplot.tsx
+++ b/Signum.React.Extensions/Chart/D3Scripts/Scatterplot.tsx
@@ -162,10 +162,10 @@ function SvgScatterplot({ data, keyColumns, xRule, yRule, initialLoad, y, x,
         const active = detector?.(r);
 
         return (
-          <g key={keyColumns.map(c => c.getValueKey(r)).join("/")} className="shape-serie sf-transition"
+          <g key={keyColumns.map(c => c.getValueKey(r)).join("/")} className="shape-serie sf-transition shadow-group"
             opacity={active == false ? .5 : undefined}
             transform={translate(xRule.start('content'), yRule.end('content')) + (initialLoad ? scale(1, 0) : scale(1, 1))}>
-            <circle className="shape sf-transition"
+            <circle className="shape sf-transition shadow"
               cx={x(horizontalColumn.getValue(r))!}
               cy={-y(verticalColumn.getValue(r))!}
               stroke={active == true ? "black" : colorKeyColumn.getValueColor(r) ?? color(r)}
diff --git a/Signum.React.Extensions/Chart/D3Scripts/StackedBars.tsx b/Signum.React.Extensions/Chart/D3Scripts/StackedBars.tsx
index d3b4a63686..a0ce9ab04c 100644
--- a/Signum.React.Extensions/Chart/D3Scripts/StackedBars.tsx
+++ b/Signum.React.Extensions/Chart/D3Scripts/StackedBars.tsx
@@ -11,6 +11,7 @@ import { XAxis, YAxis } from './Components/Axis';
 import TextEllipsis from './Components/TextEllipsis';
 import { Rule } from './Components/Rule';
 import InitialMessage from './Components/InitialMessage';
+import TextIfFits from './Components/TextIfFits';
 
 
 export default function renderStackedBars({ data, width, height, parameters, loading, onDrillDown, initialLoad, chartRequest, memo, dashboardFilter }: ChartClient.ChartScriptProps): React.ReactElement<any> {
@@ -88,8 +89,8 @@ export default function renderStackedBars({ data, width, height, parameters, loa
   var colorByKey = pivot.columns.toObject(a => a.key, a => a.color);
 
   var format = pStack == "expand" ? d3.format(".0%") :
-    pStack == "zero" ? d3.format("") :
-      (n: number) => d3.format("")(n) + "?";
+    pStack == "zero" ? valueColumn0.getNiceName :
+      (n: number) => valueColumn0.getNiceName(n) + "?";
 
   var labelMargin = 5;
 
@@ -119,47 +120,43 @@ export default function renderStackedBars({ data, width, height, parameters, loa
             var active = detector?.(row.rowClick);
 
             return (
-              <rect key={key} className="shape sf-transition"
-                transform={translate(x(r[0])!, y(key)!) + (initialLoad ? scale(0, 1) : scale(1, 1))}
-                opacity={active == false ? .5 : undefined}
-                stroke={active == true ? "black" : y.bandwidth() > 4 ? '#fff' : undefined}
-                strokeWidth={active == true ? 3 : undefined}
-                fill={colorByKey[s.key] ?? color(s.key)}
-                height={y.bandwidth()}
-                width={x(r[1])! - x(r[0])!}
-                onClick={e => onDrillDown(row.rowClick, e)}
-                cursor="pointer">
-                <title>
-                  {row.valueTitle}
-                </title>
-              </rect>
+              <g className="shadow-group" key={key}>
+                <rect className="shape sf-transition shadow"
+                  transform={translate(x(r[0])!, y(key)!) + (initialLoad ? scale(0, 1) : scale(1, 1))}
+                  opacity={active == false ? .5 : undefined}
+                  fill={colorByKey[s.key] ?? color(s.key)}
+                  height={y.bandwidth()}
+                  width={x(r[1])! - x(r[0])!}
+                  onClick={e => onDrillDown(row.rowClick, e)}
+                  cursor="pointer">
+                  <title>
+                    {row.valueTitle}
+                  </title>
+                </rect>
+                {y.bandwidth() > 15 && parseFloat(parameters["NumberOpacity"]) > 0 &&
+                  <TextIfFits className="number-label sf-transition"
+                    transform={translate(
+                      x(r[0])! * 0.5 + x(r[1])! * 0.5,
+                      y(keyColumn.getKey(r.data.rowValue))! + y.bandwidth() / 2
+                    )}
+                    maxWidth={x(r[1])! - x(r[0])!}
+                    onClick={e => onDrillDown(r.data.values[s.key].rowClick, e)}
+                    fill={parameters["NumberColor"]}
+                    dominantBaseline="middle"
+                    opacity={parameters["NumberOpacity"]}
+                    textAnchor="middle"
+                    fontWeight="bold">
+                    {r.data.values[s.key].valueNiceName}
+                    <title>
+                      {r.data.values[s.key].valueTitle}
+                    </title>
+                  </TextIfFits>
+                }
+
+              </g>
             );
           }).notNull()}
 
-        {y.bandwidth() > 15 && parseFloat(parameters["NumberOpacity"]) > 0 &&
-          s.orderBy(r => keyColumn.getKey(r.data.rowValue))
-            .filter(r => (x(r[1])! - x(r[0])!) > 20)
-            .map(r => {
-              return (
-                <text key={keyColumn.getKey(r.data.rowValue)} className="number-label sf-transition"
-                transform={translate(
-                  x(r[0])! * 0.5 + x(r[1])! * 0.5,
-                  y(keyColumn.getKey(r.data.rowValue))! + y.bandwidth() / 2
-                )}
-                onClick={e => onDrillDown(r.data.values[s.key].rowClick, e)}
-                fill={parameters["NumberColor"]}
-                dominantBaseline="middle"
-                opacity={parameters["NumberOpacity"]}
-                textAnchor="middle"
-                fontWeight="bold">
-                {r.data.values[s.key].valueNiceName}
-                <title>
-                  {r.data.values[s.key].valueTitle}
-                </title>
-                </text>
-              );
-            })
-        }
       </g>)}
 
       {y.bandwidth() > 15 && pivot.columns.length > 0 && (
diff --git a/Signum.React.Extensions/Chart/D3Scripts/StackedColumns.tsx b/Signum.React.Extensions/Chart/D3Scripts/StackedColumns.tsx
index 292b371554..ced3b4d825 100644
--- a/Signum.React.Extensions/Chart/D3Scripts/StackedColumns.tsx
+++ b/Signum.React.Extensions/Chart/D3Scripts/StackedColumns.tsx
@@ -11,6 +11,7 @@ import { XAxis, YAxis } from './Components/Axis';
 import TextEllipsis from './Components/TextEllipsis';
 import { Rule } from './Components/Rule';
 import InitialMessage from './Components/InitialMessage';
+import TextIfFits from './Components/TextIfFits';
 
 
 export default function renderStackedColumns({ data, width, height, parameters, loading, onDrillDown, initialLoad, chartRequest, memo, dashboardFilter }: ChartClient.ChartScriptProps): React.ReactElement<any> {
@@ -87,8 +88,8 @@ export default function renderStackedColumns({ data, width, height, parameters,
   var colorByKey = pivot.columns.toObject(a => a.key, a => a.color);
 
   var format = pStack == "expand" ? d3.format(".0%") :
-    pStack == "zero" ? d3.format("") :
-      (n: number) => d3.format("")(n) + "?";
+    pStack == "zero" ? valueColumn0.getNiceName :
+      (n: number) => valueColumn0.getNiceName(n) + "?";
 
   var labelMargin = 10;
   var size = yRule.size('content');
@@ -112,43 +113,41 @@ export default function renderStackedColumns({ data, width, height, parameters,
           var active = detector?.(row.rowClick);
 
           return (
-            <rect key={keyColumn.getKey(r.data.rowValue)} className="shape sf-transition"
-              transform={translate(x(keyColumn.getKey(r.data.rowValue))!, -y(r[1])!) + (initialLoad ? scale(1, 0) : scale(1, 1))}
-              opacity={active == false ? .5 : undefined}
-              stroke={active == true ? "black" : x.bandwidth() > 4 ? '#fff' : undefined}
-              strokeWidth={active == true ? 3 : undefined}
-              fill={colorByKey[s.key] ?? color(s.key)}
-              width={x.bandwidth()}
-              height={y(r[1])! - y(r[0])!}
-              onClick={e => onDrillDown(row.rowClick, e)}
-              cursor="pointer">
-              <title>
-                {row.valueTitle}
-              </title>
-            </rect>
+            <g className="shadow-group" key={keyColumn.getKey(r.data.rowValue)}>
+              <rect className="shape sf-transition shadow"
+                transform={translate(x(keyColumn.getKey(r.data.rowValue))!, -y(r[1])!) + (initialLoad ? scale(1, 0) : scale(1, 1))}
+                opacity={active == false ? .5 : undefined}
+                fill={colorByKey[s.key] ?? color(s.key)}
+                width={x.bandwidth()}
+                height={y(r[1])! - y(r[0])!}
+                onClick={e => onDrillDown(row.rowClick, e)}
+                cursor="pointer">
+                <title>
+                  {row.valueTitle}
+                </title>
+              </rect>
+              {parseFloat(parameters["NumberOpacity"]) > 0 && x.bandwidth() > 15 &&
+                <TextIfFits className="number-label sf-transition"
+                  maxWidth={y(r[1])! - y(r[0])!}
+                  transform={translate(
+                    x(keyColumn.getKey(r.data.rowValue))! + x.bandwidth() / 2,
+                    -y(r[0])! * 0.5 - y(r[1])! * 0.5
+                  ) + rotate(-90)}
+                  onClick={e => onDrillDown(r.data.values[s.key].rowClick, e)}
+                  fill={parameters["NumberColor"]}
+                  dominantBaseline="middle"
+                  opacity={parameters["NumberOpacity"]}
+                  textAnchor="middle"
+                  fontWeight="bold">
+                  {r.data.values[s.key].valueNiceName}
+                  <title>
+                    {r.data.values[s.key].valueTitle}
+                  </title>
+                </TextIfFits>}
+            </g>
           );
         }).notNull()}
 
-        {parseFloat(parameters["NumberOpacity"]) > 0 && x.bandwidth() > 15 &&
-          s.orderBy(r => keyColumn.getKey(r.data.rowValue))
-            .filter(r => (y(r[1])! - y(r[0])!) > 10)
-            .map(r => <text key={keyColumn.getKey(r.data.rowValue)} className="number-label sf-transition"
-              transform={translate(
-                x(keyColumn.getKey(r.data.rowValue))! + x.bandwidth() / 2,
-                -y(r[0])! * 0.5 - y(r[1])! * 0.5
-              )}
-              onClick={e => onDrillDown(r.data.values[s.key].rowClick, e)}
-              fill={parameters["NumberColor"]}
-              dominantBaseline="middle"
-              opacity={parameters["NumberOpacity"]}
-              textAnchor="middle"
-              fontWeight="bold">
-              {r.data.values[s.key].valueNiceName}
-              <title>
-                {r.data.values[s.key].valueTitle}
-              </title>
-            </text>)
-        }
       </g>)}
 
       {x.bandwidth() > 15 && (
diff --git a/Signum.React.Extensions/Chart/D3Scripts/StackedLines.tsx b/Signum.React.Extensions/Chart/D3Scripts/StackedLines.tsx
index e764e28cfa..ac656aa1ef 100644
--- a/Signum.React.Extensions/Chart/D3Scripts/StackedLines.tsx
+++ b/Signum.React.Extensions/Chart/D3Scripts/StackedLines.tsx
@@ -97,8 +97,8 @@ export default function renderStackedLines({ data, width, height, parameters, lo
   var columnsByKey = pivot.columns.toObject(a => a.key);
 
   var format = pStack == "expand" ? d3.format(".0%") :
-    pStack == "zero" ? d3.format("") :
-      (n: number) => d3.format("")(n) + "?";
+    pStack == "zero" ? valueColumn0.getNiceName :
+      (n: number) => valueColumn0.getNiceName(n) + "?";;
 
   var rectRadious = 2;
 
@@ -129,60 +129,52 @@ export default function renderStackedLines({ data, width, height, parameters, lo
             if (row == undefined)
               return null;
 
+            if ((y(v[1])! - y(v[0])!)! <= 10)
+              return null;
 
             var active = detector?.(row.rowClick);
 
             return (
-              <rect key={dataKey} className="point sf-transition"
-                transform={translate(x(dataKey)! - rectRadious, -y(v[1])!)}
-                width={2 * rectRadious}
-                fillOpacity={active == true ? undefined : .1}
-                fill={active == true ? "black" : "#fff"}
-                height={y(v[1])! - y(v[0])!}
-                onClick={e => onDrillDown(row.rowClick, e)}
-                cursor="pointer">
-                <title>
-                  {row.valueTitle}
-                </title>
-              </rect>
+              <g className="shadow-group" key={dataKey} >
+                <rect className="point sf-transition shadow"
+                  transform={translate(x(dataKey)! - rectRadious, -y(v[1])!)}
+                  width={2 * rectRadious}
+                  fillOpacity={active == true ? undefined : .2}
+                  fill={active == true ? "black" : colorByKey[s.key]?? color(s.key)}
+                  height={y(v[1])! - y(v[0])!}
+                  onClick={e => onDrillDown(row.rowClick, e)}
+                  cursor="pointer">
+                  <title>
+                    {row.valueTitle}
+                  </title>
+                </rect>
+
+                {x.bandwidth() > 15 && parseFloat(parameters["NumberOpacity"]) > 0 &&
+                  <TextRectangle className="number-label sf-transition"
+                    rectangleAtts={{
+                      fill: colorByKey[s.key] ?? color(s.key),
+                      opacity: active == false ? .5 : parameters["NumberOpacity"],
+                      stroke: active == true ? "black" : "none",
+                      strokeWidth: active == true ? 2 : undefined,
+                      className: "shadow"
+                    }}
+                    transform={translate(x(dataKey)!, -y(v[1])! * 0.5 - y(v[0])! * 0.5)}
+                    fill={parameters["NumberColor"]}
+                    dominantBaseline="middle"
+                    onClick={e => onDrillDown(row.rowClick, e)}
+                    textAnchor="middle"
+                    fontWeight="bold">
+                    {row.valueNiceName}
+                    <title>
+                      {row.valueTitle}
+                    </title>
+                  </TextRectangle>
+                }
+
+              </g>
             );
           })}
 
-        {x.bandwidth() > 15 && parseFloat(parameters["NumberOpacity"]) > 0 &&
-          s.orderBy(v => keyColumn.getKey(v.data))
-          .map(v => {
-            var dataKey = keyColumn.getKey(v.data);
-            var row = rowsByKey[dataKey]?.values[s.key];
-            if (row == undefined)
-              return null;
-
-            if ((y(v[1])! - y(v[0])!)! <= 10)
-              return null;
-
-            const active = detector?.(row.rowClick);
-
-            return (
-              <TextRectangle key={dataKey}
-                className="number-label sf-transition"
-                rectangleAtts={{
-                  fill: colorByKey[s.key] ?? color(s.key),
-                  opacity: active == false ? .5 : parameters["NumberOpacity"],
-                  stroke: active == true ? "black" : "none",
-                  strokeWidth: active == true ? 2 : undefined
-                }}
-                transform={translate(x(dataKey)!, -y(v[1])! * 0.5 - y(v[0])! * 0.5)}
-                fill={parameters["NumberColor"]}
-                dominantBaseline="middle"
-                onClick={e => onDrillDown(row.rowClick, e)}
-                textAnchor="middle"
-                fontWeight="bold">
-                {row.valueNiceName}
-                <title>
-                  {row.valueTitle}
-                </title>
-              </TextRectangle>)
-          })
-        }
       </g>
       )}
       <Legend pivot={pivot} xRule={xRule} yRule={yRule} color={color} isActive={c.c1 && detector && (row => detector!({c1: row.value }))} onDrillDown={c.c1 && ((s, e) => onDrillDown({ c1: s.value }, e))} />
diff --git a/Signum.React.Extensions/Chart/D3Scripts/TreeMap.tsx b/Signum.React.Extensions/Chart/D3Scripts/TreeMap.tsx
index 13aac7c658..eb37c9ceb3 100644
--- a/Signum.React.Extensions/Chart/D3Scripts/TreeMap.tsx
+++ b/Signum.React.Extensions/Chart/D3Scripts/TreeMap.tsx
@@ -94,7 +94,7 @@ export default function renderTreeMap({ data, width, height, parameters, loading
       {nodes.map((d, i) => {
         const active = activeDetector?.(isFolder(d.data) ? ({ c2: d.data.folder }) : d.data);
 
-        return (<g key={getNodeKey(d)} className="node sf-transition" transform={translate(d.x0 - p2, d.y0 - p2) + scaleTransform}>
+        return (<g key={getNodeKey(d)} className="node sf-transition shadow-group" transform={translate(d.x0 - p2, d.y0 - p2) + scaleTransform}>
           {isFolder(d.data) &&
             <rect className="folder sf-transition" shapeRendering="initial"
               opacity={active == false ? .5 : undefined}
@@ -110,7 +110,7 @@ export default function renderTreeMap({ data, width, height, parameters, loading
             </rect>
           }
           {!isFolder(d.data) &&
-            <rect className="leaf sf-transition"
+            <rect className="leaf sf-transition shadow"
               shapeRendering="initial"
               opacity={active == false ? .5 * opacity : opacity}
               width={nodeWidth(d)}