@evergis/charts 2.0.14 → 2.0.19

package/dist/charts/BarChart/drawTooltip/index.d.ts

@@ -1,2 +1,2 @@
 import { DrawTooltipProps } from './types';
-export declare const drawTooltip: ({ svg, node, data, marshalledData, xScale, yScale, renderTooltip, labelPosition, marginTop, renderLabel, barWidth, barPadding, dynamicTooltipEnable, tooltipY, tooltipBind, lineData, formatTooltipValue, formatTooltipName, tooltipYDomain, setTooltipPosition, onLabelItem, isBarTooltip, bars, }: DrawTooltipProps) => void;
+export declare const drawTooltip: ({ svg, node, data, marshalledData, xScale, yScale, renderTooltip, labelPosition, marginTop, renderLabel, barWidth, barPadding, dynamicTooltipEnable, tooltipY, tooltipBind, lineData, formatTooltipValue, formatTooltipName, tooltipYDomain, setTooltipPosition, onLabelItem, isBarTooltip, bars, tooltipRoot, tooltipClassName, }: DrawTooltipProps) => void;

package/dist/charts/BarChart/drawTooltip/types.d.ts

@@ -10,4 +10,4 @@ export declare type DrawTooltipProps = {
     marginTop: number;
     barWidth: number;
     bars: d3.Selection<SVGGElement, BarChartMarshalledGroup[], SVGGElement, unknown>;
-} & Pick<BarChartProps, 'renderTooltip' | 'labelPosition' | 'renderLabel' | 'dynamicTooltipEnable' | 'tooltipY' | 'tooltipBind' | 'lineData' | 'formatTooltipValue' | 'formatTooltipName' | 'tooltipYDomain' | 'data' | 'barPadding' | 'setTooltipPosition' | 'onLabelItem' | 'isBarTooltip'>;
+} & Pick<BarChartProps, 'renderTooltip' | 'labelPosition' | 'renderLabel' | 'dynamicTooltipEnable' | 'tooltipY' | 'tooltipBind' | 'lineData' | 'formatTooltipValue' | 'formatTooltipName' | 'tooltipYDomain' | 'data' | 'barPadding' | 'setTooltipPosition' | 'onLabelItem' | 'isBarTooltip' | 'tooltipRoot' | 'tooltipClassName'>;

package/dist/charts/BarChart/styled.d.ts

@@ -30,3 +30,4 @@ export declare const barChartClassNames: {
     barChartGridLineY: string;
 };
 export declare const SvgWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TooltipStyles: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;

package/dist/charts/BarChart/types.d.ts

@@ -101,6 +101,8 @@ export declare type BarChartProps = {
     onLabelItem?: (data: BarChartMarshalledGroup[]) => BarChartMarshalledGroup[];
     isBarTooltip?: boolean;
     xScaleItemWidth?: number;
+    tooltipRoot?: Element;
+    tooltipClassName?: string;
 };
 export declare type BarChartMergedData = (BarChartMarshalledGroup & BarChartLinetData & {
     groupName: string;

package/dist/charts/HorizontalBarChart/hooks/useTooltip/index.d.ts

@@ -1,3 +1,3 @@
 import { HorizontalBarChartProps } from '../../types';
 import { UseTooltip } from './types';
-export declare const useTooltip: ({ renderTooltip, tooltipBind, tooltipStyle, tooltipRoot, tooltipClassName, }: Pick<HorizontalBarChartProps, 'renderTooltip' | 'tooltipBind' | 'tooltipStyle' | 'tooltipRoot' | 'tooltipClassName'>) => UseTooltip;
+export declare const useTooltip: ({ renderTooltip, tooltipBind, tooltipStyle, tooltipRoot, tooltipClassName, hideTooltip, }: Pick<HorizontalBarChartProps, 'renderTooltip' | 'tooltipBind' | 'tooltipStyle' | 'tooltipRoot' | 'tooltipClassName' | 'hideTooltip'>) => UseTooltip;

package/dist/charts/HorizontalBarChart/types.d.ts

@@ -13,6 +13,7 @@ export declare type HorizontalBarChartProps = {
     maxValue?: number | undefined;
     formatNativeTitle?: (bar: HorizontalBarChartMarshalingData) => string;
     renderTooltip?: (bar: HorizontalBarChartMarshalingData[]) => ReactNode;
+    hideTooltip?: () => void;
     withTooltip?: boolean;
     fullooltip?: boolean;
     stackedTooltip?: boolean;

package/dist/charts/LineChart/types.d.ts

@@ -51,7 +51,7 @@ export declare type LineChartProps = {
     xScaleItemWidth?: number;
 };
 export declare type LineChartDot = {
-    radius: number;
+    radius?: number;
     style?: string;
     filter?: (value: LineChartData, index: number, circles: (d3.BaseType | SVGCircleElement)[] | ArrayLike<d3.BaseType | SVGCircleElement>) => boolean;
 };
@@ -65,7 +65,9 @@ export declare type LineChartData = {
     style?: string;
     dot?: LineChartDot;
     dynamicDotStyle?: string;
+    dynamicDotOff?: boolean;
     areaStyle?: string;
+    tooltipOrder?: number;
 };
 export declare type LineChartDatas = Omit<LineChartData, 'values'> & {
     value: number | null;

package/dist/charts/PieChart/drawTooltips/index.d.ts

@@ -1,2 +1,2 @@
 import { DrawTooltipProps } from './types';
-export declare const drawTooltip: ({ fullChartTooltip, global, tooltipRoot, data, tooltipClassName, tooltipBind, renderTooltip, arc, allSlices, tooltipStyle, }: DrawTooltipProps) => void;
+export declare const drawTooltip: ({ fullChartTooltip, global, tooltipRoot, data, tooltipClassName, tooltipBind, renderTooltip, arc, allSlices, tooltipStyle, width, height, radius, }: DrawTooltipProps) => void;

package/dist/charts/PieChart/drawTooltips/types.d.ts

@@ -1,7 +1,8 @@
 import * as d3 from 'd3';
 import { PieChartProps, PieChartDatum } from '../types';
-export declare type DrawTooltipProps = Pick<PieChartProps, 'fullChartTooltip' | 'tooltipRoot' | 'data' | 'tooltipClassName' | 'tooltipBind' | 'renderTooltip' | 'tooltipStyle'> & {
+export declare type DrawTooltipProps = Pick<PieChartProps, 'fullChartTooltip' | 'tooltipRoot' | 'data' | 'tooltipClassName' | 'tooltipBind' | 'renderTooltip' | 'tooltipStyle' | 'width' | 'height'> & {
     global: d3.Selection<SVGGElement, unknown, null, undefined>;
     allSlices: d3.Selection<SVGPathElement, PieChartDatum, SVGGElement, unknown>;
     arc: d3.Arc<any, d3.DefaultArcObject>;
+    radius: number;
 };

package/dist/charts/PieChart/styled.d.ts

@@ -13,5 +13,6 @@ export declare const pieChartclassNames: {
     pieTooltipName: string;
     pieTooltipValue: string;
     pieTooltipColorBox: string;
+    pieFullChartTooltipCircle: string;
 };
 export declare const SvgWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/charts.cjs.development.js

@@ -88,7 +88,7 @@ const THROTTLE_DELAY = 44;
 const useResize = (width, callback, delay) => {
   const throttledCallback = React.useMemo(() => {
     return callback ? throttle(callback, delay || THROTTLE_DELAY) : undefined;
-  }, [callback]);
+  }, [callback, delay]);
   React.useEffect(() => {
     throttledCallback && typeof width !== 'number' && window.addEventListener('resize', throttledCallback);
     return () => throttledCallback && window.removeEventListener('resize', throttledCallback);
@@ -726,7 +726,7 @@ function degreesToRadians(degrees) {
 }
 
 function _templateObject$5() {
-  const data = _taggedTemplateLiteralLoose(["\n  .", " {\n    fill: #4a4a4a;\n  }\n  .", " {\n    position: absolute;\n    max-width: 128px;\n  }\n  .", " {\n    stroke: #000;\n  }\n"]);
+  const data = _taggedTemplateLiteralLoose(["\n  .", " {\n    fill: #4a4a4a;\n  }\n  .", " {\n    position: absolute;\n    max-width: 128px;\n  }\n  .", " {\n    stroke: #000;\n  }\n  .", " {\n    fill: transparent;\n    cursor: pointer;\n  }\n"]);
 
   _templateObject$5 = function _templateObject() {
     return data;
@@ -748,9 +748,10 @@ const pieChartclassNames = {
   pieTooltipItem: 'pieTooltipItem',
   pieTooltipName: 'pieTooltipName',
   pieTooltipValue: 'pieTooltipValue',
-  pieTooltipColorBox: 'pieTooltipColorBox'
+  pieTooltipColorBox: 'pieTooltipColorBox',
+  pieFullChartTooltipCircle: 'pieFullChartTooltipCircle'
 };
-const SvgWrapper$1 = /*#__PURE__*/styled__default(Wrapper)( /*#__PURE__*/_templateObject$5(), pieChartclassNames.pieSliceLabel, pieChartclassNames.pieRadialLabel, pieChartclassNames.pieRadialLink);
+const SvgWrapper$1 = /*#__PURE__*/styled__default(Wrapper)( /*#__PURE__*/_templateObject$5(), pieChartclassNames.pieSliceLabel, pieChartclassNames.pieRadialLabel, pieChartclassNames.pieRadialLink, pieChartclassNames.pieFullChartTooltipCircle);
 
 const getMidFactor = d => d.startAngle + (d.endAngle - d.startAngle) / 2 < Math.PI ? 1 : -1;
 const getAlign = d => {
@@ -979,7 +980,10 @@ const drawTooltip = (_ref) => {
     renderTooltip,
     arc,
     allSlices,
-    tooltipStyle
+    tooltipStyle,
+    width,
+    height,
+    radius
   } = _ref;
   const container = tooltipRoot || document.querySelector('body');
   const format = d3.format(',');
@@ -1066,11 +1070,15 @@ const drawTooltip = (_ref) => {
 
   if (fullChartTooltip) {
     global.on('mouseover.fulltooltip', event => setTooltip(event));
-    global.on('mouseoutfulltooltip', () => {
+    global.on('mouseout.fulltooltip', () => {
       tooltipContainer.html('');
       setVisible();
     });
 
+    if (width && height) {
+      global.append('circle').attr('class', pieChartclassNames.pieFullChartTooltipCircle).attr('r', radius).attr('cx', 0).attr('cy', 0);
+    }
+
     if (!tooltipBind) {
       global.on('touchmove.tooltipBind mousemove.tooltipBind', event => setPosition(event));
     }
@@ -1215,7 +1223,10 @@ const draw$1 = (node, props) => {
         renderTooltip,
         allSlices,
         arc,
-        tooltipStyle
+        tooltipStyle,
+        width,
+        height,
+        radius
       });
     }
 
@@ -1710,16 +1721,21 @@ const drawTooltip$1 = (_ref) => {
   const mouseRect = mouseGlobal.append('rect').attr('width', x2 - x1).attr('height', Math.abs(y1 - y2)).attr('class', lineChartClassNames.lineChartMouseRect).attr('transform', "translate(" + x1 + ", " + y2 + ")");
   const mouseLine = mouseGlobal.append('path').attr('class', lineChartClassNames.lineChartMouseLine).style('opacity', '0');
   const lines = svg.selectAll("." + lineChartClassNames.lineChartLine).nodes();
-  const circles = mouseGlobal.selectAll('circle').data(chartData).join('circle').attr('class', lineChartClassNames.lineChartMouseCircle).attr('r', dynamicCircleRadius).attr('fill', (_ref3) => {
+  const circles = mouseGlobal.selectAll('circle').data(chartData.filter((_ref3) => {
     let {
-      stroke
+      dynamicDotOff
     } = _ref3;
-    return stroke || 'none';
-  }).attr('stroke', (_ref4) => {
+    return !dynamicDotOff;
+  })).join('circle').attr('class', lineChartClassNames.lineChartMouseCircle).attr('r', dynamicCircleRadius).attr('fill', (_ref4) => {
     let {
       stroke
     } = _ref4;
     return stroke || 'none';
+  }).attr('stroke', (_ref5) => {
+    let {
+      stroke
+    } = _ref5;
+    return stroke || 'none';
   }).style('opacity', '0');
   let labelContainer = d3.select("." + lineChartClassNames.lineChartMouseLabelContainer);
 
@@ -1780,27 +1796,27 @@ const drawTooltip$1 = (_ref) => {
     circles.attr('transform', (lineChartData, index) => {
       const value = getValue(lineChartData.values);
       return positions[index] && value ? 'translate(' + x + ',' + positions[index].y + ')' : 'translate(-9999, -9999)';
-    }).attr('style', (_ref5) => {
+    }).attr('style', (_ref6) => {
       let {
         dynamicDotStyle
-      } = _ref5;
+      } = _ref6;
       return dynamicDotStyle || '';
     });
-    const datas = chartData.map((_ref6, i) => {
+    const datas = chartData.map((_ref7, i) => {
       let {
         values
-      } = _ref6,
-          rest = _objectWithoutPropertiesLoose(_ref6, ["values"]);
+      } = _ref7,
+          rest = _objectWithoutPropertiesLoose(_ref7, ["values"]);
 
       return _extends({}, rest, {
         value: getValue(values),
         invertValue: positions[i] ? yScale.invert(positions[i].y) : 0
       });
     });
-    const noHasData = datas.every((_ref7) => {
+    const noHasData = datas.every((_ref8) => {
       let {
         value
-      } = _ref7;
+      } = _ref8;
       return isVoid(value);
     });
 
@@ -1815,7 +1831,8 @@ const drawTooltip$1 = (_ref) => {
 
       const prevValue = (_datas$Number = datas[Number(acc)]) == null ? void 0 : _datas$Number.value;
       const value = (_datas$Number2 = datas[Number(key)]) == null ? void 0 : _datas$Number2.value;
-      return index === 0 || isVoid(value) ? acc : isVoid(prevValue) || positions[acc].y > positions[key].y ? key : acc;
+      const dynamicDotOff = argData == null ? void 0 : argData[index].dynamicDotOff;
+      return index === 0 || isVoid(value) || dynamicDotOff ? acc : isVoid(prevValue) || positions[acc].y > positions[key].y ? key : acc;
     }, '0');
     const labelTexts = labels && labels.style('left', left + "px").style('top', (_, i) => {
       const index = typeof stackedTooltipIndex === 'number' ? stackedTooltipIndex : stackedTooltip ? topIndex : i;
@@ -2061,7 +2078,7 @@ const draw$3 = (node, props) => {
           filter
         } = dot;
         const dotsGroup = dotsGlobal.append('g').attr('class', lineChartClassNames.lineChartDotsGlobal);
-        dotsGroup.selectAll('circle').data(values).join('circle').attr('cx', (_, index) => xScale(index)).attr('class', lineChartClassNames.lineChartDot).attr('cy', d => yScale(d)).attr('r', radius).attr('style', style || '');
+        dotsGroup.selectAll('circle').data(values).join('circle').attr('cx', (_, index) => xScale(index)).attr('class', lineChartClassNames.lineChartDot).attr('cy', d => yScale(d)).attr('r', radius || 0).attr('style', style || '');
 
         if (filter) {
           dotsGroup.selectAll('circle').select((_, i, g) => filter(item, i, g) ? g[i] : null).remove();
@@ -2215,8 +2232,18 @@ const drawLines = (_ref) => {
   };
 };
 
+function _templateObject2$4() {
+  const data = _taggedTemplateLiteralLoose(["\n  .", " {\n    z-index: 1;\n    transition: all linear 144ms;\n\n    .", " {\n      margin-bottom: 4px;\n      :last-of-type {\n        margin-bottom: 0;\n      }\n    }\n  }\n"]);
+
+  _templateObject2$4 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
 function _templateObject$a() {
-  const data = _taggedTemplateLiteralLoose(["\n  line {\n    stroke-width: 1px;\n    shape-rendering: crispEdges;\n  }\n  .", ",\n    .", " {\n    stroke: rgba(48, 69, 79, 0.06);\n  }\n  .", " {\n  }\n  .", " {\n    fill: none;\n    pointer-events: all;\n  }\n  .", " {\n    z-index: 1;\n  }\n  .", " {\n    stroke-width: 1.5px;\n    stroke-linejoin: round;\n    stroke-linecap: round;\n  }\n  .", " {\n    shape-rendering: auto;\n  }\n  .", " {\n    fill-opacity: 0.24;\n  }\n  .", " {\n    margin-bottom: 4px;\n    :last-of-type {\n      margin-bottom: 0;\n    }\n  }\n"]);
+  const data = _taggedTemplateLiteralLoose(["\n  line {\n    stroke-width: 1px;\n    shape-rendering: crispEdges;\n  }\n  .", ",\n    .", " {\n    stroke: rgba(48, 69, 79, 0.06);\n  }\n  .", " {\n  }\n  .", " {\n    fill: none;\n    pointer-events: all;\n  }\n  .", " {\n    stroke-width: 1.5px;\n    stroke-linejoin: round;\n    stroke-linecap: round;\n  }\n  .", " {\n    shape-rendering: auto;\n  }\n  .", " {\n    fill-opacity: 0.24;\n  }\n"]);
 
   _templateObject$a = function _templateObject() {
     return data;
@@ -2255,7 +2282,8 @@ const barChartClassNames = /*#__PURE__*/_extends({
   barChartGridLineYZero: 'barChartGridLineYZero',
   barChartGridLineY: 'barChartGridLineY'
 }, tooltipClassnames, labelClassnames, barChartLinesClassNames);
-const SvgWrapper$4 = /*#__PURE__*/styled__default(Wrapper)( /*#__PURE__*/_templateObject$a(), barChartClassNames.barChartGridLineX, barChartClassNames.barChartGridLineY, barChartClassNames.barChartMouseRect, barChartClassNames.barChartMouseRect, barChartClassNames.barChartMouseTooltip, barChartClassNames.barChartLinesGlobal, barChartClassNames.barChartLine, barChartClassNames.barChartArea, barChartClassNames.barChartTooltipItem);
+const SvgWrapper$4 = /*#__PURE__*/styled__default(Wrapper)( /*#__PURE__*/_templateObject$a(), barChartClassNames.barChartGridLineX, barChartClassNames.barChartGridLineY, barChartClassNames.barChartMouseRect, barChartClassNames.barChartMouseRect, barChartClassNames.barChartLinesGlobal, barChartClassNames.barChartLine, barChartClassNames.barChartArea);
+const TooltipStyles$1 = /*#__PURE__*/styled.createGlobalStyle( /*#__PURE__*/_templateObject2$4(), barChartClassNames.barChartMouseTooltip, barChartClassNames.barChartTooltipItem);
 
 const drawGrid$1 = (_ref) => {
   let {
@@ -2440,7 +2468,9 @@ const drawTooltip$2 = (_ref) => {
     setTooltipPosition,
     onLabelItem,
     isBarTooltip,
-    bars
+    bars,
+    tooltipRoot,
+    tooltipClassName
   } = _ref;
   d3.select(node).select("." + barChartClassNames.barChartMouseContainer).remove();
   const xScaleBandDomain = xScale.domain();
@@ -2473,19 +2503,21 @@ const drawTooltip$2 = (_ref) => {
   }, []);
   const mouseGlobal = svg.append('g').attr('class', 'lineChartMouseGlobal');
   const mouseRect = mouseGlobal.append('rect').attr('width', x2 - x1).attr('height', Math.abs(y1 - y2)).attr('class', barChartClassNames.barChartMouseRect).attr('transform', "translate(" + x1 + ", " + y2 + ")");
-  const container = d3.select(node).append('div').attr('class', barChartClassNames.barChartMouseContainer);
 
   if (dynamicTooltipEnable) {
-    const tooltip = container.append('div').attr('class', barChartClassNames.barChartMouseTooltip).style('opacity', '0').style('position', 'absolute').html(() => {
-      const html = ReactDOMServer.renderToString(React__default.createElement(TooltipFlex, {
-        className: barChartClassNames.barChartTooltipFlex
-      }, React__default.createElement(TooltipContainer, {
-        className: barChartClassNames.barChartTooltip
-      })));
-      return html;
-    });
+    const tooltipContainer = tooltipRoot || document.querySelector('body');
+    let tooltip = d3.select("." + barChartClassNames.barChartMouseTooltip);
+
+    if (tooltip.size() === 0) {
+      tooltip = d3.select(tooltipContainer).append('div').attr('class', barChartClassNames.barChartMouseTooltip).style('opacity', '0').style('position', 'absolute').html(() => {
+        const html = ReactDOMServer.renderToString(React__default.createElement(TooltipFlex, {
+          className: barChartClassNames.barChartTooltipFlex
+        }));
+        return html;
+      });
+    }
+
     const barChartTootipFlex = tooltip.select("." + barChartClassNames.barChartTooltipFlex);
-    const barChartTooltip = tooltip.select("." + barChartClassNames.barChartTooltip);
     let isVisible = false;
     let flagCurrIndex = null;
 
@@ -2495,20 +2527,25 @@ const drawTooltip$2 = (_ref) => {
       tooltip.style('opacity', opacity);
 
       if (!isVisible) {
+        tooltip.attr('class', barChartClassNames.barChartMouseTooltip);
         flagCurrIndex = null;
         tooltip.style('transition', 'none');
         tooltip.style('top', null);
         tooltip.style('left', null);
       } else {
+        tooltip.attr('class', barChartClassNames.barChartMouseTooltip + " " + (tooltipClassName || ''));
         tooltip.style('transition', null);
       }
     };
 
     mouseRect.on('mouseout.tooltip', () => setVisible());
     mouseRect.on('touchmove.tooltip mousemove.tooltip', event => {
+      const [docX, docY] = d3.pointer(event, document);
       const [rectrX] = d3.pointer(event, mouseRect);
-      const [nodeX] = d3.pointer(event, node);
+      const [nodeX, nodeY] = d3.pointer(event, node);
       const x = rectrX - (rectrX - nodeX);
+      const offsetX = docX - nodeX;
+      const offsetY = docY - nodeY;
       const currIndex = groups.findIndex(value => x <= value);
 
       if (isBarTooltip) {
@@ -2528,8 +2565,8 @@ const drawTooltip$2 = (_ref) => {
         }
       }
 
-      const top = typeof tooltipY === 'number' ? tooltipY : topYDomain[currIndex] - y2;
-      const left = tooltipBind ? (xScale(currIndex.toString()) || 0) + bandwidth / 2 : x;
+      const top = (typeof tooltipY === 'number' ? tooltipY : topYDomain[currIndex] - y2) + offsetY;
+      const left = (tooltipBind ? (xScale(currIndex.toString()) || 0) + bandwidth / 2 : x) + offsetX;
 
       if (tooltipBind && flagCurrIndex === currIndex) {
         return;
@@ -2587,8 +2624,10 @@ const drawTooltip$2 = (_ref) => {
           setVisible(true);
         }
 
-        barChartTooltip.html(() => {
-          const html = ReactDOMServer.renderToString(React__default.createElement(React__default.Fragment, null, currData && currData[0] && React__default.createElement(TooltipGroupName, {
+        barChartTootipFlex.html(() => {
+          const html = ReactDOMServer.renderToString(React__default.createElement(TooltipContainer, {
+            className: barChartClassNames.barChartTooltip
+          }, currData && currData[0] && React__default.createElement(TooltipGroupName, {
             className: barChartClassNames.barChartTooltipGroupName
           }, currData[0].groupName), currData && currData.map((_ref5) => {
             let {
@@ -2632,6 +2671,7 @@ const drawTooltip$2 = (_ref) => {
     });
   }
 
+  const container = d3.select(node).append('div').attr('class', barChartClassNames.barChartMouseContainer);
   const labelContainer = container.append('div').attr('class', barChartClassNames.barChartLabelContainer).style('position', 'absolute').style('top', y2 + "px");
 
   if (labelPosition) {
@@ -2763,7 +2803,9 @@ const draw$4 = (node, props) => {
     setTooltipPosition,
     onLabelItem,
     isBarTooltip,
-    xScaleItemWidth
+    xScaleItemWidth,
+    tooltipRoot,
+    tooltipClassName
   } = props;
 
   if (node !== null && data.length) {
@@ -2918,7 +2960,9 @@ const draw$4 = (node, props) => {
         setTooltipPosition,
         onLabelItem,
         isBarTooltip,
-        bars: groups
+        bars: groups,
+        tooltipRoot,
+        tooltipClassName
       });
     }
 
@@ -2949,7 +2993,7 @@ const BarChart = props => {
   return React__default.createElement("div", {
     className: className,
     style: style
-  }, React__default.createElement(SvgWrapper$4, {
+  }, React__default.createElement(TooltipStyles$1, null), React__default.createElement(SvgWrapper$4, {
     ref: ref
   }, children));
 };
@@ -3076,10 +3120,10 @@ function _templateObject3$2() {
   return data;
 }
 
-function _templateObject2$4() {
+function _templateObject2$5() {
   const data = _taggedTemplateLiteralLoose(["\n  text-align: right;\n"]);
 
-  _templateObject2$4 = function _templateObject2() {
+  _templateObject2$5 = function _templateObject2() {
     return data;
   };
 
@@ -3118,7 +3162,7 @@ const horizontalBarChartClassNames = {
   horizontalBarChartTooltipValue: 'horizontalBarChartTooltipValue'
 };
 const Table = /*#__PURE__*/styled__default.table( /*#__PURE__*/_templateObject$b());
-const LabelCell = /*#__PURE__*/styled__default.div( /*#__PURE__*/_templateObject2$4());
+const LabelCell = /*#__PURE__*/styled__default.div( /*#__PURE__*/_templateObject2$5());
 const BarFlex = /*#__PURE__*/styled__default.div( /*#__PURE__*/_templateObject3$2());
 const BarsTd = /*#__PURE__*/styled__default.td( /*#__PURE__*/_templateObject4$2());
 const TooltipFlex$1 = /*#__PURE__*/styled__default(TooltipFlex)( /*#__PURE__*/_templateObject5$2());
@@ -3155,7 +3199,7 @@ const Tooltip = (_ref) => {
       }
     }), name && React__default.createElement(Name$1, {
       className: horizontalBarChartClassNames.horizontalBarChartTooltipName
-    }, "name"), React__default.createElement(Value, {
+    }, name), React__default.createElement(Value, {
       className: horizontalBarChartClassNames.horizontalBarChartTooltipValue
     }, format(value)));
   })));
@@ -3168,7 +3212,8 @@ const useTooltip = (_ref) => {
     tooltipBind,
     tooltipStyle,
     tooltipRoot,
-    tooltipClassName
+    tooltipClassName,
+    hideTooltip
   } = _ref;
   React.useEffect(() => {
     const container = tooltipRoot || document.querySelector('body');
@@ -3207,8 +3252,9 @@ const useTooltip = (_ref) => {
   const onMouseLeave = React.useCallback(() => {
     if (rootElement) {
       rootElement.style.visibility = 'hidden';
+      hideTooltip && hideTooltip();
     }
-  }, []);
+  }, [hideTooltip]);
   return [onMouseMove, onMouseLeave];
 };
 
@@ -3308,10 +3354,10 @@ function _templateObject3$3() {
   return data;
 }
 
-function _templateObject2$5() {
+function _templateObject2$6() {
   const data = _taggedTemplateLiteralLoose(["\n  position: relative;\n  height: 1rem;\n"]);
 
-  _templateObject2$5 = function _templateObject2() {
+  _templateObject2$6 = function _templateObject2() {
     return data;
   };
 
@@ -3328,7 +3374,7 @@ function _templateObject$d() {
   return data;
 }
 const TickTd = /*#__PURE__*/styled__default.td( /*#__PURE__*/_templateObject$d());
-const Ticks = /*#__PURE__*/styled__default.div( /*#__PURE__*/_templateObject2$5());
+const Ticks = /*#__PURE__*/styled__default.div( /*#__PURE__*/_templateObject2$6());
 const Tick = /*#__PURE__*/styled__default.div( /*#__PURE__*/_templateObject3$3());
 
 const XScale = (_ref) => {
@@ -3388,7 +3434,8 @@ const HorizontalBarChart = (_ref) => {
     thead,
     withoutXScale,
     stackedTooltip,
-    fullChartTooltip
+    fullChartTooltip,
+    hideTooltip
   } = _ref;
   const {
     fullMax,
@@ -3403,7 +3450,8 @@ const HorizontalBarChart = (_ref) => {
     renderTooltip,
     tooltipBind,
     tooltipStyle,
-    tooltipClassName
+    tooltipClassName,
+    hideTooltip
   });
   const Stack = useStackWrapper(stackedTooltip);
   return React__default.createElement(Table, {
@@ -3484,10 +3532,10 @@ HorizontalBarChart.defaultProps = {
   withoutXScale: false
 };
 
-function _templateObject2$6() {
+function _templateObject2$7() {
   const data = _taggedTemplateLiteralLoose(["\n  .", " {\n    position: absolute;\n    transition: opacity 150ms cubic-bezier(0.2, 1, 0.6, 1);\n    pointer-events: none;\n    z-index: 1;\n  }\n"]);
 
-  _templateObject2$6 = function _templateObject2() {
+  _templateObject2$7 = function _templateObject2() {
     return data;
   };
 
@@ -3518,7 +3566,7 @@ const bubbleChartClassNames = {
   bubbleChartTip: 'bubbleChartTip'
 };
 const SvgWrapper$5 = /*#__PURE__*/styled__default(Wrapper)( /*#__PURE__*/_templateObject$e(), bubbleChartClassNames.bubbleChartYAxis, bubbleChartClassNames.bubbleChartXAxis, bubbleChartClassNames.bubbleChartGridGlobal, bubbleChartClassNames.bubbleChartGridLineX, bubbleChartClassNames.bubbleChartGridLineY, bubbleChartClassNames.bubbleChartYScaleLabel);
-const TooltipStyles$1 = /*#__PURE__*/styled.createGlobalStyle( /*#__PURE__*/_templateObject2$6(), bubbleChartClassNames.bubbleChartTooltipContainer);
+const TooltipStyles$2 = /*#__PURE__*/styled.createGlobalStyle( /*#__PURE__*/_templateObject2$7(), bubbleChartClassNames.bubbleChartTooltipContainer);
 
 const drawGrid$2 = (_ref) => {
   let {
@@ -3800,7 +3848,7 @@ const BubbleChart = props => {
   return React__default.createElement("div", {
     className: className,
     style: style
-  }, React__default.createElement(TooltipStyles$1, null), React__default.createElement(SvgWrapper$5, {
+  }, React__default.createElement(TooltipStyles$2, null), React__default.createElement(SvgWrapper$5, {
     ref: ref
   }, children));
 };