@semcore/d3-chart 16.3.0 → 16.4.0-prerelease.0

package/lib/esm/Bar.mjs

@@ -17,26 +17,26 @@ var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SBar_1gb94_gg_{fill:var(--intergalactic-chart-palette-order-1, #2bb3ff);transition-property:height,width,y;transition-duration:var(--duration_1gb94);transition-timing-function:ease-in-out}.___SBar_1gb94_gg_.__color_1gb94_gg_{fill:var(--color_1gb94)}.___SBar_1gb94_gg_.__pattern_1gb94_gg_.__color_1gb94_gg_{fill:var(--pattern_1gb94);stroke:var(--color_1gb94);stroke-width:1px}.___SBar_1gb94_gg_.__hide_1gb94_gg_{display:none}.___SBar_1gb94_gg_.__transparent_1gb94_gg_{opacity:.3}.___SBackground_1gb94_gg_.__onClick_1gb94_gg_,.___SBar_1gb94_gg_.__onClick_1gb94_gg_{cursor:pointer}.___SBackground_1gb94_gg_{fill:var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9)}.___SBarAnnotation_1gb94_gg_{display:flex;justify-content:space-between}.___SBarLabel_1gb94_gg_{color:var(--intergalactic-text-primary, #191b23);margin-right:auto}.___SBarLabel_1gb94_gg_,.___SBarPercent_1gb94_gg_,.___SBarValue_1gb94_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SBarPercent_1gb94_gg_{color:var(--intergalactic-text-secondary, #6c6e79);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SBarValue_1gb94_gg_{min-width:52px;display:flex;justify-content:flex-end;color:var(--intergalactic-text-primary, #191b23);text-align:right}.___SCompactHorizontalBarHoverRect_1gb94_gg_{fill:var(--intergalactic-chart-grid-bar-chart-hover, rgba(196, 199, 207, 0.3))}",
+    ".___SBar_1u73j_gg_{fill:var(--intergalactic-chart-palette-order-1, #2bb3ff);transition-property:height,width,y;transition-duration:var(--duration_1u73j);transition-timing-function:ease-in-out}.___SBar_1u73j_gg_.__color_1u73j_gg_{fill:var(--color_1u73j)}.___SBar_1u73j_gg_.__pattern_1u73j_gg_.__color_1u73j_gg_{fill:var(--pattern_1u73j);stroke:var(--color_1u73j);stroke-width:1px}.___SBar_1u73j_gg_.__hide_1u73j_gg_{display:none}.___SBar_1u73j_gg_.__transparent_1u73j_gg_{opacity:.3}.___SBackground_1u73j_gg_.__onClick_1u73j_gg_,.___SBar_1u73j_gg_.__onClick_1u73j_gg_{cursor:pointer}.___SBackground_1u73j_gg_{fill:var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9)}.___SBarAnnotation_1u73j_gg_{display:flex;justify-content:space-between}.___SBarLabel_1u73j_gg_{color:var(--intergalactic-text-primary, #191b23);margin-right:auto}.___SBarLabel_1u73j_gg_,.___SBarPercent_1u73j_gg_,.___SBarValue_1u73j_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SBarPercent_1u73j_gg_{color:var(--intergalactic-text-secondary, #6c6e79);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SBarValue_1u73j_gg_{min-width:52px;display:flex;justify-content:flex-end;color:var(--intergalactic-text-primary, #191b23);text-align:right}.___SCompactHorizontalBarHoverRect_1u73j_gg_{fill:var(--intergalactic-chart-grid-bar-chart-hover, rgba(196, 199, 207, 0.3))}",
     /*__inner_css_end__*/
-    "1gb94_gg_"
+    "1u73j_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SBar": "___SBar_1gb94_gg_",
-    "--duration": "--duration_1gb94",
-    "_color": "__color_1gb94_gg_",
-    "--color": "--color_1gb94",
-    "_pattern": "__pattern_1gb94_gg_",
-    "--pattern": "--pattern_1gb94",
-    "_hide": "__hide_1gb94_gg_",
-    "_transparent": "__transparent_1gb94_gg_",
-    "_onClick": "__onClick_1gb94_gg_",
-    "__SBackground": "___SBackground_1gb94_gg_",
-    "__SBarAnnotation": "___SBarAnnotation_1gb94_gg_",
-    "__SBarLabel": "___SBarLabel_1gb94_gg_",
-    "__SBarPercent": "___SBarPercent_1gb94_gg_",
-    "__SBarValue": "___SBarValue_1gb94_gg_",
-    "__SCompactHorizontalBarHoverRect": "___SCompactHorizontalBarHoverRect_1gb94_gg_"
+    "__SBar": "___SBar_1u73j_gg_",
+    "--duration": "--duration_1u73j",
+    "_color": "__color_1u73j_gg_",
+    "--color": "--color_1u73j",
+    "_pattern": "__pattern_1u73j_gg_",
+    "--pattern": "--pattern_1u73j",
+    "_hide": "__hide_1u73j_gg_",
+    "_transparent": "__transparent_1u73j_gg_",
+    "_onClick": "__onClick_1u73j_gg_",
+    "__SBackground": "___SBackground_1u73j_gg_",
+    "__SBarAnnotation": "___SBarAnnotation_1u73j_gg_",
+    "__SBarLabel": "___SBarLabel_1u73j_gg_",
+    "__SBarPercent": "___SBarPercent_1u73j_gg_",
+    "__SBarValue": "___SBarValue_1u73j_gg_",
+    "__SCompactHorizontalBarHoverRect": "___SCompactHorizontalBarHoverRect_1u73j_gg_"
   })
 );
 var MIN_HEIGHT = 2;

package/lib/esm/Bubble.mjs

@@ -6,6 +6,7 @@ import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { sstyled, assignProps, Component } from "@semcore/core";
+import { callAllEventHandlers } from "@semcore/core/lib/utils/assignProps";
 import findComponent from "@semcore/core/lib/utils/findComponent";
 import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
 import { transition } from "d3-transition";
@@ -20,23 +21,23 @@ var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SBubble_1ucvn_gg_{fill:var(--intergalactic-chart-palette-order-1, #2bb3ff);stroke:var(--intergalactic-chart-grid-border, #ffffff);stroke-width:2px;transition-property:cx,cy;transition-duration:var(--duration_1ucvn);transition-timing-function:ease-in-out;opacity:.5}@media (hover:hover){.___SBubble_1ucvn_gg_:hover{opacity:.8}}g._visible_false_1ucvn_gg_{display:none}.___SBubble_1ucvn_gg_.__color_1ucvn_gg_{fill:var(--color_1ucvn)}.___SBubble_1ucvn_gg_.__pattern_1ucvn_gg_.__color_1ucvn_gg_{fill:var(--pattern_1ucvn);stroke:var(--color_1ucvn);stroke-width:1px}.___SBubble_1ucvn_gg_.__transparent_1ucvn_gg_{opacity:.3}.___SCenter_1ucvn_gg_{text-anchor:middle;font-size:calc(var(--intergalactic-fs-100, 12px) - 1px);stroke:var(--intergalactic-chart-palette-order-1, #2bb3ff)}.___SCenter_1ucvn_gg_.__color_1ucvn_gg_{stroke:var(--color_1ucvn)}.___SCenter_1ucvn_gg_.__transparent_1ucvn_gg_{opacity:.3}.___SLabel_1ucvn_gg_{fill:var(--intergalactic-chart-palette-order-1, #2bb3ff)}.___SLabel_1ucvn_gg_._position_right_1ucvn_gg_{text-anchor:end}.___SLabel_1ucvn_gg_._position_left_1ucvn_gg_{text-anchor:start}.___SLabel_1ucvn_gg_.__color_1ucvn_gg_{fill:var(--color_1ucvn)}.___SLabel_1ucvn_gg_.__transparent_1ucvn_gg_{opacity:.3}",
+    ".___SBubble_emxoi_gg_{fill:var(--intergalactic-chart-palette-order-1, #2bb3ff);stroke:var(--intergalactic-chart-grid-border, #ffffff);stroke-width:2px;transition-property:cx,cy;transition-duration:var(--duration_emxoi);transition-timing-function:ease-in-out;opacity:.5}@media (hover:hover){.___SBubble_emxoi_gg_:hover{opacity:.8}}g._visible_false_emxoi_gg_{display:none}.___SBubble_emxoi_gg_.__color_emxoi_gg_{fill:var(--color_emxoi)}.___SBubble_emxoi_gg_.__pattern_emxoi_gg_.__color_emxoi_gg_{fill:var(--pattern_emxoi);stroke:var(--color_emxoi);stroke-width:1px}.___SBubble_emxoi_gg_.__transparent_emxoi_gg_{opacity:.3}.___SCenter_emxoi_gg_{text-anchor:middle;font-size:calc(var(--intergalactic-fs-100, 12px) - 1px);stroke:var(--intergalactic-chart-palette-order-1, #2bb3ff)}.___SCenter_emxoi_gg_.__color_emxoi_gg_{stroke:var(--color_emxoi)}.___SCenter_emxoi_gg_.__transparent_emxoi_gg_{opacity:.3}.___SLabel_emxoi_gg_{fill:var(--intergalactic-chart-palette-order-1, #2bb3ff)}.___SLabel_emxoi_gg_._position_right_emxoi_gg_{text-anchor:end}.___SLabel_emxoi_gg_._position_left_emxoi_gg_{text-anchor:start}.___SLabel_emxoi_gg_.__color_emxoi_gg_{fill:var(--color_emxoi)}.___SLabel_emxoi_gg_.__transparent_emxoi_gg_{opacity:.3}",
     /*__inner_css_end__*/
-    "1ucvn_gg_"
+    "emxoi_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "_visible_false": "_visible_false_1ucvn_gg_",
-    "__SBubble": "___SBubble_1ucvn_gg_",
-    "_color": "__color_1ucvn_gg_",
-    "--color": "--color_1ucvn",
-    "_pattern": "__pattern_1ucvn_gg_",
-    "--pattern": "--pattern_1ucvn",
-    "_transparent": "__transparent_1ucvn_gg_",
-    "__SCenter": "___SCenter_1ucvn_gg_",
-    "__SLabel": "___SLabel_1ucvn_gg_",
-    "_position_right": "_position_right_1ucvn_gg_",
-    "_position_left": "_position_left_1ucvn_gg_",
-    "--duration": "--duration_1ucvn"
+    "_visible_false": "_visible_false_emxoi_gg_",
+    "__SBubble": "___SBubble_emxoi_gg_",
+    "_color": "__color_emxoi_gg_",
+    "--color": "--color_emxoi",
+    "_pattern": "__pattern_emxoi_gg_",
+    "--pattern": "--pattern_emxoi",
+    "_transparent": "__transparent_emxoi_gg_",
+    "__SCenter": "___SCenter_emxoi_gg_",
+    "__SLabel": "___SLabel_emxoi_gg_",
+    "_position_right": "_position_right_emxoi_gg_",
+    "_position_left": "_position_left_emxoi_gg_",
+    "--duration": "--duration_emxoi"
   })
 );
 var BubbleRoot = /* @__PURE__ */ (function(_Component) {
@@ -50,10 +51,10 @@ var BubbleRoot = /* @__PURE__ */ (function(_Component) {
     _defineProperty(_this, "bindHandlerTooltip", function(visible, props, tooltipProps) {
       return function(_ref4) {
         var clientX = _ref4.clientX, clientY = _ref4.clientY;
-        var eventEmitter = _this.asProps.eventEmitter;
-        eventEmitter.emit("setTooltipPosition", clientX, clientY);
-        eventEmitter.emit("setTooltipRenderingProps", props, tooltipProps);
-        eventEmitter.emit("setTooltipVisible", visible);
+        var _this$asProps = _this.asProps, eventEmitter = _this$asProps.eventEmitter, plotId = _this$asProps.plotId;
+        eventEmitter.emit("setTooltipPosition_".concat(plotId), clientX, clientY);
+        eventEmitter.emit("setTooltipRenderingProps_".concat(plotId), props, tooltipProps);
+        eventEmitter.emit("setTooltipVisible_".concat(plotId), visible);
       };
     });
     return _this;
@@ -78,7 +79,7 @@ var BubbleRoot = /* @__PURE__ */ (function(_Component) {
   }, {
     key: "animationCircle",
     value: function animationCircle() {
-      var _this$asProps = this.asProps, duration = _this$asProps.duration, uid = _this$asProps.uid, data = _this$asProps.data, value = _this$asProps.value;
+      var _this$asProps2 = this.asProps, duration = _this$asProps2.duration, uid = _this$asProps2.uid, data = _this$asProps2.data, value = _this$asProps2.value;
       var z = getBubbleChartValueScale(data, value);
       var selectRect = transition().selection().selectAll("[id^=".concat(uid).concat(uid, "]")).attr("r", 0);
       var selectRectNode = selectRect.node();
@@ -92,7 +93,7 @@ var BubbleRoot = /* @__PURE__ */ (function(_Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var _this$asProps2 = this.asProps, data = _this$asProps2.data, x = _this$asProps2.x, y = _this$asProps2.y, value = _this$asProps2.value;
+      var _this$asProps3 = this.asProps, data = _this$asProps3.data, x = _this$asProps3.x, y = _this$asProps3.y, value = _this$asProps3.value;
       var prevX = prevProps.x, prevY = prevProps.y, prevValue = prevProps.value;
       var prevData = prevProps.$rootProps.data;
       if (data !== prevData || x !== prevX || y !== prevY || value !== prevValue) {
@@ -117,7 +118,7 @@ var BubbleRoot = /* @__PURE__ */ (function(_Component) {
   }, {
     key: "getCircleProps",
     value: function getCircleProps() {
-      var _this$asProps3 = this.asProps, color = _this$asProps3.color, scale = _this$asProps3.scale, x = _this$asProps3.x, y = _this$asProps3.y, offset = _this$asProps3.offset, styles = _this$asProps3.styles, uid = _this$asProps3.uid, duration = _this$asProps3.duration, value = _this$asProps3.value, label = _this$asProps3.label, markedCross = _this$asProps3.markedCross, size = _this$asProps3.size, data = _this$asProps3.data, transparent = _this$asProps3.transparent, resolveColor = _this$asProps3.resolveColor, patterns = _this$asProps3.patterns;
+      var _this$asProps4 = this.asProps, color = _this$asProps4.color, scale = _this$asProps4.scale, x = _this$asProps4.x, y = _this$asProps4.y, offset = _this$asProps4.offset, styles = _this$asProps4.styles, uid = _this$asProps4.uid, duration = _this$asProps4.duration, value = _this$asProps4.value, label = _this$asProps4.label, markedCross = _this$asProps4.markedCross, size = _this$asProps4.size, data = _this$asProps4.data, transparent = _this$asProps4.transparent, resolveColor = _this$asProps4.resolveColor, patterns = _this$asProps4.patterns;
       return {
         color,
         scale,
@@ -136,13 +137,13 @@ var BubbleRoot = /* @__PURE__ */ (function(_Component) {
         resolveColor,
         patterns,
         bindHandlerTooltip: this.bindHandlerTooltip,
-        onClick: this.handlerOnClick.bind(this)
+        onClickCircleRoot: this.handlerOnClick.bind(this)
       };
     }
   }, {
     key: "render",
     value: function render() {
-      var _this$asProps4 = this.asProps, data = _this$asProps4.data, uid = _this$asProps4.uid, scale = _this$asProps4.scale, x = _this$asProps4.x, y = _this$asProps4.y, value = _this$asProps4.value, Children = _this$asProps4.Children;
+      var _this$asProps5 = this.asProps, data = _this$asProps5.data, uid = _this$asProps5.uid, scale = _this$asProps5.scale, x = _this$asProps5.x, y = _this$asProps5.y, value = _this$asProps5.value, Children = _this$asProps5.Children;
       var _scale = _slicedToArray(scale, 2), xScale = _scale[0], yScale = _scale[1];
       var xSize = Math.abs(xScale.range()[0] - xScale.range()[1]);
       var ySize = Math.abs(yScale.range()[0] - yScale.range()[1]);
@@ -185,7 +186,7 @@ var BubbleTooltip = function BubbleTooltip2(props) {
 };
 function BubbleCircle(props) {
   var _ref3, _circleData$color;
-  var color = props.color, scale = props.scale, x = props.x, y = props.y, offset = props.offset, styles = props.styles, uid = props.uid, duration = props.duration, value = props.value, label = props.label, markedCross = props.markedCross, size = props.size, data = props.data, transparent = props.transparent, resolveColor = props.resolveColor, patterns = props.patterns, index = props.index, bindHandlerTooltip = props.bindHandlerTooltip, Element = props.Element, _props$visible = props.visible, visible = _props$visible === void 0 ? true : _props$visible, onClick = props.onClick;
+  var color = props.color, scale = props.scale, x = props.x, y = props.y, offset = props.offset, styles = props.styles, uid = props.uid, duration = props.duration, value = props.value, label = props.label, markedCross = props.markedCross, size = props.size, data = props.data, transparent = props.transparent, resolveColor = props.resolveColor, patterns = props.patterns, index = props.index, bindHandlerTooltip = props.bindHandlerTooltip, Element = props.Element, _props$visible = props.visible, visible = _props$visible === void 0 ? true : _props$visible, onClick = props.onClick, onClickCircleRoot = props.onClickCircleRoot;
   var circleData = data[index];
   if (!circleData) return null;
   var _scale2 = _slicedToArray(scale, 2), xScale = _scale2[0], yScale = _scale2[1];
@@ -202,7 +203,7 @@ function BubbleCircle(props) {
   return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SvgElement, _ref3.cn("SvgElement", {
     "tag": "g",
     "key": "circle(#".concat(index, ")"),
-    "onClickCapture": onClick(index),
+    "onClickCapture": callAllEventHandlers(onClickCircleRoot(index), onClick),
     "onMouseMove": bindHandlerTooltip(true, props, {
       xIndex: index,
       index,

package/lib/esm/CompactHorizontalBar.mjs

@@ -23,26 +23,26 @@ var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SBar_1gb94_gg_{fill:var(--intergalactic-chart-palette-order-1, #2bb3ff);transition-property:height,width,y;transition-duration:var(--duration_1gb94);transition-timing-function:ease-in-out}.___SBar_1gb94_gg_.__color_1gb94_gg_{fill:var(--color_1gb94)}.___SBar_1gb94_gg_.__pattern_1gb94_gg_.__color_1gb94_gg_{fill:var(--pattern_1gb94);stroke:var(--color_1gb94);stroke-width:1px}.___SBar_1gb94_gg_.__hide_1gb94_gg_{display:none}.___SBar_1gb94_gg_.__transparent_1gb94_gg_{opacity:.3}.___SBackground_1gb94_gg_.__onClick_1gb94_gg_,.___SBar_1gb94_gg_.__onClick_1gb94_gg_{cursor:pointer}.___SBackground_1gb94_gg_{fill:var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9)}.___SBarAnnotation_1gb94_gg_{display:flex;justify-content:space-between}.___SBarLabel_1gb94_gg_{color:var(--intergalactic-text-primary, #191b23);margin-right:auto}.___SBarLabel_1gb94_gg_,.___SBarPercent_1gb94_gg_,.___SBarValue_1gb94_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SBarPercent_1gb94_gg_{color:var(--intergalactic-text-secondary, #6c6e79);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SBarValue_1gb94_gg_{min-width:52px;display:flex;justify-content:flex-end;color:var(--intergalactic-text-primary, #191b23);text-align:right}.___SCompactHorizontalBarHoverRect_1gb94_gg_{fill:var(--intergalactic-chart-grid-bar-chart-hover, rgba(196, 199, 207, 0.3))}",
+    ".___SBar_1u73j_gg_{fill:var(--intergalactic-chart-palette-order-1, #2bb3ff);transition-property:height,width,y;transition-duration:var(--duration_1u73j);transition-timing-function:ease-in-out}.___SBar_1u73j_gg_.__color_1u73j_gg_{fill:var(--color_1u73j)}.___SBar_1u73j_gg_.__pattern_1u73j_gg_.__color_1u73j_gg_{fill:var(--pattern_1u73j);stroke:var(--color_1u73j);stroke-width:1px}.___SBar_1u73j_gg_.__hide_1u73j_gg_{display:none}.___SBar_1u73j_gg_.__transparent_1u73j_gg_{opacity:.3}.___SBackground_1u73j_gg_.__onClick_1u73j_gg_,.___SBar_1u73j_gg_.__onClick_1u73j_gg_{cursor:pointer}.___SBackground_1u73j_gg_{fill:var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9)}.___SBarAnnotation_1u73j_gg_{display:flex;justify-content:space-between}.___SBarLabel_1u73j_gg_{color:var(--intergalactic-text-primary, #191b23);margin-right:auto}.___SBarLabel_1u73j_gg_,.___SBarPercent_1u73j_gg_,.___SBarValue_1u73j_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SBarPercent_1u73j_gg_{color:var(--intergalactic-text-secondary, #6c6e79);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SBarValue_1u73j_gg_{min-width:52px;display:flex;justify-content:flex-end;color:var(--intergalactic-text-primary, #191b23);text-align:right}.___SCompactHorizontalBarHoverRect_1u73j_gg_{fill:var(--intergalactic-chart-grid-bar-chart-hover, rgba(196, 199, 207, 0.3))}",
     /*__inner_css_end__*/
-    "1gb94_gg_"
+    "1u73j_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SBar": "___SBar_1gb94_gg_",
-    "--duration": "--duration_1gb94",
-    "_color": "__color_1gb94_gg_",
-    "--color": "--color_1gb94",
-    "_pattern": "__pattern_1gb94_gg_",
-    "--pattern": "--pattern_1gb94",
-    "_hide": "__hide_1gb94_gg_",
-    "_transparent": "__transparent_1gb94_gg_",
-    "_onClick": "__onClick_1gb94_gg_",
-    "__SBackground": "___SBackground_1gb94_gg_",
-    "__SBarAnnotation": "___SBarAnnotation_1gb94_gg_",
-    "__SBarLabel": "___SBarLabel_1gb94_gg_",
-    "__SBarPercent": "___SBarPercent_1gb94_gg_",
-    "__SBarValue": "___SBarValue_1gb94_gg_",
-    "__SCompactHorizontalBarHoverRect": "___SCompactHorizontalBarHoverRect_1gb94_gg_"
+    "__SBar": "___SBar_1u73j_gg_",
+    "--duration": "--duration_1u73j",
+    "_color": "__color_1u73j_gg_",
+    "--color": "--color_1u73j",
+    "_pattern": "__pattern_1u73j_gg_",
+    "--pattern": "--pattern_1u73j",
+    "_hide": "__hide_1u73j_gg_",
+    "_transparent": "__transparent_1u73j_gg_",
+    "_onClick": "__onClick_1u73j_gg_",
+    "__SBackground": "___SBackground_1u73j_gg_",
+    "__SBarAnnotation": "___SBarAnnotation_1u73j_gg_",
+    "__SBarLabel": "___SBarLabel_1u73j_gg_",
+    "__SBarPercent": "___SBarPercent_1u73j_gg_",
+    "__SBarValue": "___SBarValue_1u73j_gg_",
+    "__SCompactHorizontalBarHoverRect": "___SCompactHorizontalBarHoverRect_1u73j_gg_"
   })
 );
 var MIN_WIDTH = 4;
@@ -400,28 +400,28 @@ var Hover = /* @__PURE__ */ (function(_Component2) {
     _defineProperty(_this3, "unsubscribeMouseMoveRoot", null);
     _defineProperty(_this3, "unsubscribeMouseLeaveRoot", null);
     _defineProperty(_this3, "handlerMouseMoveRoot", trottle(function(e) {
-      var _this3$asProps = _this3.asProps, eventEmitter = _this3$asProps.eventEmitter, rootRef = _this3$asProps.rootRef, patterns = _this3$asProps.patterns, updateIndexToHover = _this3$asProps.updateIndexToHover;
+      var _this3$asProps = _this3.asProps, eventEmitter = _this3$asProps.eventEmitter, rootRef = _this3$asProps.rootRef, patterns = _this3$asProps.patterns, updateIndexToHover = _this3$asProps.updateIndexToHover, plotId = _this3$asProps.plotId;
       var point = eventToPoint(e, rootRef.current);
       var clientX = e.clientX, clientY = e.clientY;
       var index = _this3.getIndex(point);
       _this3.setState({
         index
       }, function() {
-        eventEmitter.emit("setTooltipPosition", clientX, clientY);
-        eventEmitter.emit("setTooltipRenderingProps", {}, {
+        eventEmitter.emit("setTooltipPosition_".concat(plotId), clientX, clientY);
+        eventEmitter.emit("setTooltipRenderingProps_".concat(plotId), {}, {
           index,
           patterns
         });
-        eventEmitter.emit("setTooltipVisible", index !== null);
+        eventEmitter.emit("setTooltipVisible_".concat(plotId), index !== null);
         updateIndexToHover(index);
       });
     }));
     _defineProperty(_this3, "handlerMouseLeaveRoot", trottle(function() {
-      var updateIndexToHover = _this3.asProps.updateIndexToHover;
+      var _this3$asProps2 = _this3.asProps, updateIndexToHover = _this3$asProps2.updateIndexToHover, plotId = _this3$asProps2.plotId;
       _this3.setState({
         index: null
       }, function() {
-        _this3.asProps.eventEmitter.emit("setTooltipVisible", false);
+        _this3.asProps.eventEmitter.emit("setTooltipVisible_".concat(plotId), false);
         updateIndexToHover(null);
       });
     }));

package/lib/esm/Donut.mjs

@@ -7,6 +7,7 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { sstyled, assignProps, Component } from "@semcore/core";
+import { callAllEventHandlers } from "@semcore/core/lib/utils/assignProps";
 import canUseDOM from "@semcore/core/lib/utils/canUseDOM";
 import getOriginChildren from "@semcore/core/lib/utils/getOriginChildren";
 import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
@@ -18,25 +19,25 @@ import createElement from "./createElement.mjs";
 import { PatternFill } from "./Pattern.mjs";
 import Tooltip from "./Tooltip.mjs";
 import { getChartDefaultColorName } from "./utils.mjs";
-var _excluded = ["Element", "styles", "d3Arc", "data", "color", "$animationActivePie", "active", "d3ArcOut", "name", "dataKey", "dataHintsHandler", "transparent", "innerRadius", "outerRadius", "resolveColor", "halfsize", "uid", "patterns", "onClick"];
+var _excluded = ["Element", "styles", "d3Arc", "data", "color", "$animationActivePie", "active", "d3ArcOut", "name", "dataKey", "dataHintsHandler", "transparent", "innerRadius", "outerRadius", "resolveColor", "halfsize", "uid", "patterns", "onClick", "onClickPieRoot"];
 /*!__reshadow-styles__:"./style/donut.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SPie_1xjlm_gg_{stroke:var(--intergalactic-chart-grid-border, #ffffff);fill:var(--intergalactic-chart-palette-order-1, #2bb3ff)}.___SPie_1xjlm_gg_.__color_1xjlm_gg_{fill:var(--color_1xjlm)}.___SPie_1xjlm_gg_.__pattern_1xjlm_gg_.__color_1xjlm_gg_{fill:var(--pattern_1xjlm);stroke:var(--color_1xjlm);stroke-width:1px}.___SPie_1xjlm_gg_.__transparent_1xjlm_gg_{opacity:.3}.___SEmptyData_1xjlm_gg_{fill:var(--intergalactic-chart-palette-order-null, #e0e1e9)}.___SEmptyData_1xjlm_gg_.__color_1xjlm_gg_{fill:var(--color_1xjlm)}.___SLabel_1xjlm_gg_{text-anchor:middle;vertical-anchor:middle;font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}",
+    ".___SPie_ndlco_gg_{stroke:var(--intergalactic-chart-grid-border, #ffffff);fill:var(--intergalactic-chart-palette-order-1, #2bb3ff)}.___SPie_ndlco_gg_.__color_ndlco_gg_{fill:var(--color_ndlco)}.___SPie_ndlco_gg_.__pattern_ndlco_gg_.__color_ndlco_gg_{fill:var(--pattern_ndlco);stroke:var(--color_ndlco);stroke-width:1px}.___SPie_ndlco_gg_.__transparent_ndlco_gg_{opacity:.3}.___SEmptyData_ndlco_gg_{fill:var(--intergalactic-chart-palette-order-null, #e0e1e9)}.___SEmptyData_ndlco_gg_.__color_ndlco_gg_{fill:var(--color_ndlco)}.___SLabel_ndlco_gg_{text-anchor:middle;vertical-anchor:middle;font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}",
     /*__inner_css_end__*/
-    "1xjlm_gg_"
+    "ndlco_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SPie": "___SPie_1xjlm_gg_",
-    "_color": "__color_1xjlm_gg_",
-    "--color": "--color_1xjlm",
-    "_pattern": "__pattern_1xjlm_gg_",
-    "--pattern": "--pattern_1xjlm",
-    "_transparent": "__transparent_1xjlm_gg_",
-    "__SEmptyData": "___SEmptyData_1xjlm_gg_",
-    "__SLabel": "___SLabel_1xjlm_gg_"
+    "__SPie": "___SPie_ndlco_gg_",
+    "_color": "__color_ndlco_gg_",
+    "--color": "--color_ndlco",
+    "_pattern": "__pattern_ndlco_gg_",
+    "--pattern": "--pattern_ndlco",
+    "_transparent": "__transparent_ndlco_gg_",
+    "__SEmptyData": "___SEmptyData_ndlco_gg_",
+    "__SLabel": "___SLabel_ndlco_gg_"
   })
 );
 var DEFAULT_INSTANCE = Symbol("DEFAULT_INSTANCE");
@@ -99,15 +100,15 @@ var DonutRoot = /* @__PURE__ */ (function(_Component) {
     _defineProperty(_this, "bindHandlerTooltip", function(visible, props, tooltipProps) {
       return function(_ref9) {
         var clientX = _ref9.clientX, clientY = _ref9.clientY;
-        var eventEmitter = _this.asProps.eventEmitter;
-        eventEmitter.emit("setTooltipPosition", clientX, clientY);
-        eventEmitter.emit("setTooltipRenderingProps", props, tooltipProps);
-        eventEmitter.emit("setTooltipVisible", visible);
+        var _this$asProps = _this.asProps, eventEmitter = _this$asProps.eventEmitter, plotId = _this$asProps.plotId;
+        eventEmitter.emit("setTooltipPosition_".concat(plotId), clientX, clientY);
+        eventEmitter.emit("setTooltipRenderingProps_".concat(plotId), props, tooltipProps);
+        eventEmitter.emit("setTooltipVisible_".concat(plotId), visible);
       };
     });
     _defineProperty(_this, "animationActivePie", function(_ref0) {
       var data = _ref0.data, active = _ref0.active, selector = _ref0.selector, element = _ref0.element;
-      var _this$asProps = _this.asProps, duration = _this$asProps.duration, innerRadius = _this$asProps.innerRadius, d3Arc = _this$asProps.d3Arc, paddingAngle = _this$asProps.paddingAngle;
+      var _this$asProps2 = _this.asProps, duration = _this$asProps2.duration, innerRadius = _this$asProps2.innerRadius, d3Arc = _this$asProps2.d3Arc, paddingAngle = _this$asProps2.paddingAngle;
       var outerRadius = d3Arc.outerRadius()();
       var outerRadiusStartEnd = active ? [+element.dataset["currentRadius"] || outerRadius, outerRadius + increaseFactor] : [+element.dataset["currentRadius"] || outerRadius, outerRadius];
       if (_this.canAnimatedHover && duration > 0) {
@@ -126,7 +127,7 @@ var DonutRoot = /* @__PURE__ */ (function(_Component) {
     _defineProperty(_this, "animationUpdatePie", function() {
       clearTimeout(_this.animationTimeout);
       _this.animationTimeout = setTimeout(function() {
-        var _this$asProps2 = _this.asProps, duration = _this$asProps2.duration, d3Arc = _this$asProps2.d3Arc, halfsize = _this$asProps2.halfsize, d3ArcOut = _this$asProps2.d3ArcOut;
+        var _this$asProps3 = _this.asProps, duration = _this$asProps3.duration, d3Arc = _this$asProps3.d3Arc, halfsize = _this$asProps3.halfsize, d3ArcOut = _this$asProps3.d3ArcOut;
         _this.canAnimatedHover = false;
         if (duration > 0) {
           transitionAnglePie({
@@ -151,7 +152,7 @@ var DonutRoot = /* @__PURE__ */ (function(_Component) {
   return _createClass(DonutRoot2, [{
     key: "id",
     get: function get() {
-      var _this$asProps3 = this.asProps, uid = _this$asProps3.uid, id = _this$asProps3.id;
+      var _this$asProps4 = this.asProps, uid = _this$asProps4.uid, id = _this$asProps4.id;
       return id || uid;
     }
   }, {
@@ -173,7 +174,7 @@ var DonutRoot = /* @__PURE__ */ (function(_Component) {
   }, {
     key: "getArcs",
     value: function getArcs() {
-      var _this$asProps4 = this.asProps, Children = _this$asProps4.Children, data = _this$asProps4.data, d3Pie = _this$asProps4.d3Pie;
+      var _this$asProps5 = this.asProps, Children = _this$asProps5.Children, data = _this$asProps5.data, d3Pie = _this$asProps5.d3Pie;
       var pieData = Object.entries(data);
       if (d3Pie[DEFAULT_INSTANCE]) {
         var keys = React.Children.toArray(getOriginChildren(Children)).reduce(function(acc, child) {
@@ -216,7 +217,7 @@ var DonutRoot = /* @__PURE__ */ (function(_Component) {
     key: "getPieProps",
     value: function getPieProps(props, index) {
       var _this3 = this;
-      var _this$asProps5 = this.asProps, d3Arc = _this$asProps5.d3Arc, d3ArcOut = _this$asProps5.d3ArcOut, innerRadius = _this$asProps5.innerRadius, outerRadius = _this$asProps5.outerRadius, halfsize = _this$asProps5.halfsize, resolveColor = _this$asProps5.resolveColor, uid = _this$asProps5.uid, patterns = _this$asProps5.patterns;
+      var _this$asProps6 = this.asProps, d3Arc = _this$asProps6.d3Arc, d3ArcOut = _this$asProps6.d3ArcOut, innerRadius = _this$asProps6.innerRadius, outerRadius = _this$asProps6.outerRadius, halfsize = _this$asProps6.halfsize, resolveColor = _this$asProps6.resolveColor, uid = _this$asProps6.uid, patterns = _this$asProps6.patterns;
       var active = props.active;
       var data = this.arcs.find(function(arc2) {
         return arc2.data[0] === props.dataKey;
@@ -267,7 +268,7 @@ var DonutRoot = /* @__PURE__ */ (function(_Component) {
             });
           }
         },
-        onClick: this.handlerOnClick.bind(this)
+        onClickPieRoot: this.handlerOnClick(props.dataKey)
       };
     }
   }, {
@@ -294,7 +295,7 @@ var DonutRoot = /* @__PURE__ */ (function(_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$asProps6 = this.asProps, halfsize = _this$asProps6.halfsize, size = _this$asProps6.size;
+      var _this$asProps7 = this.asProps, halfsize = _this$asProps7.halfsize, size = _this$asProps7.size;
       this.asProps.dataHintsHandler.establishDataType("values-set");
       var _size2 = _slicedToArray(size, 2), width = _size2[0], height = _size2[1];
       var Element = this.Element;
@@ -342,7 +343,7 @@ _defineProperty(DonutRoot, "defaultProps", function(_ref18) {
 });
 function Pie(_ref15) {
   var _ref2;
-  var SPie = _ref15.Element, styles = _ref15.styles, d3Arc = _ref15.d3Arc, data = _ref15.data, color = _ref15.color, $animationActivePie = _ref15.$animationActivePie, active = _ref15.active, d3ArcOut = _ref15.d3ArcOut, name = _ref15.name, dataKey = _ref15.dataKey, dataHintsHandler = _ref15.dataHintsHandler, transparent = _ref15.transparent, innerRadius = _ref15.innerRadius, outerRadius = _ref15.outerRadius, resolveColor = _ref15.resolveColor, halfsize = _ref15.halfsize, uid = _ref15.uid, patterns = _ref15.patterns, onClick = _ref15.onClick, other = _objectWithoutProperties(_ref15, _excluded);
+  var SPie = _ref15.Element, styles = _ref15.styles, d3Arc = _ref15.d3Arc, data = _ref15.data, color = _ref15.color, $animationActivePie = _ref15.$animationActivePie, active = _ref15.active, d3ArcOut = _ref15.d3ArcOut, name = _ref15.name, dataKey = _ref15.dataKey, dataHintsHandler = _ref15.dataHintsHandler, transparent = _ref15.transparent, innerRadius = _ref15.innerRadius, outerRadius = _ref15.outerRadius, resolveColor = _ref15.resolveColor, halfsize = _ref15.halfsize, uid = _ref15.uid, patterns = _ref15.patterns, onClick = _ref15.onClick, onClickPieRoot = _ref15.onClickPieRoot, other = _objectWithoutProperties(_ref15, _excluded);
   var _React$useState = React.useState(false), _React$useState2 = _slicedToArray(_React$useState, 2), isMount = _React$useState2[0], setIsMount = _React$useState2[1];
   var pieRef = React.useRef(null);
   React.useEffect(function() {
@@ -375,7 +376,7 @@ function Pie(_ref15) {
     "pattern": patterns ? "url(#".concat(uid, "-pattern)") : void 0,
     "d": active ? d3ArcOut(data) : d3Arc(data),
     "transparent": transparent,
-    "onClick": onClick(dataKey)
+    "use:onClick": callAllEventHandlers(onClickPieRoot, onClick)
   }))), patterns && /* @__PURE__ */ React.createElement(PatternFill, _ref2.cn("PatternFill", {
     "id": "".concat(uid, "-pattern"),
     "patternKey": color,

package/lib/esm/Dots.mjs

@@ -11,18 +11,18 @@ var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SDots_17fh8_gg_ .___SDot_17fh8_gg_{transition-duration:var(--duration_17fh8)}.___SDot_17fh8_gg_{stroke-width:1px;stroke:var(--intergalactic-chart-grid-border, #ffffff);fill:var(--intergalactic-chart-palette-order-1, #2bb3ff);transition-property:cx,cy,x,y;transition-timing-function:ease-in-out}.___SDot_17fh8_gg_.__hide_17fh8_gg_{display:none}.___SDot_17fh8_gg_.__color_17fh8_gg_{fill:var(--color_17fh8)}.___SDot_17fh8_gg_.__transparent_17fh8_gg_{opacity:.3}",
+    ".___SDots_153y5_gg_ .___SDot_153y5_gg_{transition-duration:var(--duration_153y5)}.___SDot_153y5_gg_{stroke-width:1px;stroke:var(--intergalactic-chart-grid-border, #ffffff);fill:var(--intergalactic-chart-palette-order-1, #2bb3ff);transition-property:cx,cy,x,y;transition-timing-function:ease-in-out}.___SDot_153y5_gg_.__hide_153y5_gg_{display:none}.___SDot_153y5_gg_.__color_153y5_gg_{fill:var(--color_153y5)}.___SDot_153y5_gg_.__transparent_153y5_gg_{opacity:.3}",
     /*__inner_css_end__*/
-    "17fh8_gg_"
+    "153y5_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SDot": "___SDot_17fh8_gg_",
-    "_hide": "__hide_17fh8_gg_",
-    "_color": "__color_17fh8_gg_",
-    "--color": "--color_17fh8",
-    "_transparent": "__transparent_17fh8_gg_",
-    "__SDots": "___SDots_17fh8_gg_",
-    "--duration": "--duration_17fh8"
+    "__SDot": "___SDot_153y5_gg_",
+    "_hide": "__hide_153y5_gg_",
+    "_color": "__color_153y5_gg_",
+    "--color": "--color_153y5",
+    "_transparent": "__transparent_153y5_gg_",
+    "__SDots": "___SDots_153y5_gg_",
+    "--duration": "--duration_153y5"
   })
 );
 function Dots(props) {

package/lib/esm/HorizontalBar.mjs

@@ -16,26 +16,26 @@ var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SBar_1gb94_gg_{fill:var(--intergalactic-chart-palette-order-1, #2bb3ff);transition-property:height,width,y;transition-duration:var(--duration_1gb94);transition-timing-function:ease-in-out}.___SBar_1gb94_gg_.__color_1gb94_gg_{fill:var(--color_1gb94)}.___SBar_1gb94_gg_.__pattern_1gb94_gg_.__color_1gb94_gg_{fill:var(--pattern_1gb94);stroke:var(--color_1gb94);stroke-width:1px}.___SBar_1gb94_gg_.__hide_1gb94_gg_{display:none}.___SBar_1gb94_gg_.__transparent_1gb94_gg_{opacity:.3}.___SBackground_1gb94_gg_.__onClick_1gb94_gg_,.___SBar_1gb94_gg_.__onClick_1gb94_gg_{cursor:pointer}.___SBackground_1gb94_gg_{fill:var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9)}.___SBarAnnotation_1gb94_gg_{display:flex;justify-content:space-between}.___SBarLabel_1gb94_gg_{color:var(--intergalactic-text-primary, #191b23);margin-right:auto}.___SBarLabel_1gb94_gg_,.___SBarPercent_1gb94_gg_,.___SBarValue_1gb94_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SBarPercent_1gb94_gg_{color:var(--intergalactic-text-secondary, #6c6e79);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SBarValue_1gb94_gg_{min-width:52px;display:flex;justify-content:flex-end;color:var(--intergalactic-text-primary, #191b23);text-align:right}.___SCompactHorizontalBarHoverRect_1gb94_gg_{fill:var(--intergalactic-chart-grid-bar-chart-hover, rgba(196, 199, 207, 0.3))}",
+    ".___SBar_1u73j_gg_{fill:var(--intergalactic-chart-palette-order-1, #2bb3ff);transition-property:height,width,y;transition-duration:var(--duration_1u73j);transition-timing-function:ease-in-out}.___SBar_1u73j_gg_.__color_1u73j_gg_{fill:var(--color_1u73j)}.___SBar_1u73j_gg_.__pattern_1u73j_gg_.__color_1u73j_gg_{fill:var(--pattern_1u73j);stroke:var(--color_1u73j);stroke-width:1px}.___SBar_1u73j_gg_.__hide_1u73j_gg_{display:none}.___SBar_1u73j_gg_.__transparent_1u73j_gg_{opacity:.3}.___SBackground_1u73j_gg_.__onClick_1u73j_gg_,.___SBar_1u73j_gg_.__onClick_1u73j_gg_{cursor:pointer}.___SBackground_1u73j_gg_{fill:var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9)}.___SBarAnnotation_1u73j_gg_{display:flex;justify-content:space-between}.___SBarLabel_1u73j_gg_{color:var(--intergalactic-text-primary, #191b23);margin-right:auto}.___SBarLabel_1u73j_gg_,.___SBarPercent_1u73j_gg_,.___SBarValue_1u73j_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SBarPercent_1u73j_gg_{color:var(--intergalactic-text-secondary, #6c6e79);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SBarValue_1u73j_gg_{min-width:52px;display:flex;justify-content:flex-end;color:var(--intergalactic-text-primary, #191b23);text-align:right}.___SCompactHorizontalBarHoverRect_1u73j_gg_{fill:var(--intergalactic-chart-grid-bar-chart-hover, rgba(196, 199, 207, 0.3))}",
     /*__inner_css_end__*/
-    "1gb94_gg_"
+    "1u73j_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SBar": "___SBar_1gb94_gg_",
-    "--duration": "--duration_1gb94",
-    "_color": "__color_1gb94_gg_",
-    "--color": "--color_1gb94",
-    "_pattern": "__pattern_1gb94_gg_",
-    "--pattern": "--pattern_1gb94",
-    "_hide": "__hide_1gb94_gg_",
-    "_transparent": "__transparent_1gb94_gg_",
-    "_onClick": "__onClick_1gb94_gg_",
-    "__SBackground": "___SBackground_1gb94_gg_",
-    "__SBarAnnotation": "___SBarAnnotation_1gb94_gg_",
-    "__SBarLabel": "___SBarLabel_1gb94_gg_",
-    "__SBarPercent": "___SBarPercent_1gb94_gg_",
-    "__SBarValue": "___SBarValue_1gb94_gg_",
-    "__SCompactHorizontalBarHoverRect": "___SCompactHorizontalBarHoverRect_1gb94_gg_"
+    "__SBar": "___SBar_1u73j_gg_",
+    "--duration": "--duration_1u73j",
+    "_color": "__color_1u73j_gg_",
+    "--color": "--color_1u73j",
+    "_pattern": "__pattern_1u73j_gg_",
+    "--pattern": "--pattern_1u73j",
+    "_hide": "__hide_1u73j_gg_",
+    "_transparent": "__transparent_1u73j_gg_",
+    "_onClick": "__onClick_1u73j_gg_",
+    "__SBackground": "___SBackground_1u73j_gg_",
+    "__SBarAnnotation": "___SBarAnnotation_1u73j_gg_",
+    "__SBarLabel": "___SBarLabel_1u73j_gg_",
+    "__SBarPercent": "___SBarPercent_1u73j_gg_",
+    "__SBarValue": "___SBarValue_1u73j_gg_",
+    "__SCompactHorizontalBarHoverRect": "___SCompactHorizontalBarHoverRect_1u73j_gg_"
   })
 );
 var MIN_WIDTH = 2;

package/lib/esm/Hover.mjs

@@ -7,6 +7,7 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { sstyled, assignProps, Component } from "@semcore/core";
 import canUseDOM from "@semcore/core/lib/utils/canUseDOM";
+import { hasParent } from "@semcore/core/lib/utils/hasParent";
 import trottle from "@semcore/core/lib/utils/rafTrottle";
 import React from "react";
 import createElement from "./createElement.mjs";
@@ -17,13 +18,13 @@ var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SHoverLine_1675o_gg_,.___SHoverLine_1675o_gg_:focus-visible{outline:0;stroke:var(--intergalactic-chart-grid-x-axis, #c4c7cf)}.___SHoverRect_1675o_gg_,.___SHoverRect_1675o_gg_:focus-visible{outline:0;fill:var(--intergalactic-chart-grid-bar-chart-hover, rgba(196, 199, 207, 0.3))}",
+    ".___SHoverLine_gc5pl_gg_,.___SHoverLine_gc5pl_gg_:focus-visible{outline:0;stroke:var(--intergalactic-chart-grid-x-axis, #c4c7cf)}.___SHoverRect_gc5pl_gg_,.___SHoverRect_gc5pl_gg_:focus-visible{outline:0;fill:var(--intergalactic-chart-grid-bar-chart-hover, rgba(196, 199, 207, 0.3))}",
     /*__inner_css_end__*/
-    "1675o_gg_"
+    "gc5pl_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SHoverLine": "___SHoverLine_1675o_gg_",
-    "__SHoverRect": "___SHoverRect_1675o_gg_"
+    "__SHoverLine": "___SHoverLine_gc5pl_gg_",
+    "__SHoverRect": "___SHoverRect_gc5pl_gg_"
   })
 );
 var Hover = /* @__PURE__ */ (function(_Component) {
@@ -39,8 +40,8 @@ var Hover = /* @__PURE__ */ (function(_Component) {
       yIndex: null
     });
     _defineProperty(_this, "virtualElement", canUseDOM() ? document.createElement("div") : {});
-    _defineProperty(_this, "handlerMouseMoveRoot", trottle(function(e) {
-      var _this$asProps = _this.asProps, eventEmitter = _this$asProps.eventEmitter, data = _this$asProps.data, scale = _this$asProps.scale, x = _this$asProps.x, y = _this$asProps.y, rootRef = _this$asProps.rootRef, patterns = _this$asProps.patterns;
+    _defineProperty(_this, "handlerMouseMoveRoot", trottle(function(e, currentTarget) {
+      var _this$asProps = _this.asProps, eventEmitter = _this$asProps.eventEmitter, data = _this$asProps.data, scale = _this$asProps.scale, x = _this$asProps.x, y = _this$asProps.y, rootRef = _this$asProps.rootRef, patterns = _this$asProps.patterns, plotId = _this$asProps.plotId;
       var clientX = e.clientX, clientY = e.clientY;
       var _scale = _slicedToArray(scale, 2), xScale = _scale[0], yScale = _scale[1];
       var _eventToPoint = eventToPoint(e, rootRef.current), _eventToPoint2 = _slicedToArray(_eventToPoint, 2), pX = _eventToPoint2[0], pY = _eventToPoint2[1];
@@ -53,10 +54,20 @@ var Hover = /* @__PURE__ */ (function(_Component) {
         yIndex,
         patterns
       };
+      var _rootRef$current$getB = rootRef.current.getBoundingClientRect(), xRect = _rootRef$current$getB.x, yRect = _rootRef$current$getB.y, height = _rootRef$current$getB.height;
+      var _currentTarget$getBou = currentTarget.getBoundingClientRect(), yOriginal = _currentTarget$getBou.y, heightOriginal = _currentTarget$getBou.height;
+      var isRootTooltip = hasParent(e.target, rootRef.current);
       _this.setState(state, function() {
-        eventEmitter.emit("setTooltipPosition", clientX, clientY);
-        eventEmitter.emit("setTooltipRenderingProps", {}, state);
-        eventEmitter.emit("setTooltipVisible", xIndex !== null || yIndex !== null);
+        if (isRootTooltip) {
+          eventEmitter.emit("setTooltipPosition_".concat(plotId), clientX, clientY);
+        } else {
+          var diff = clientY - yOriginal;
+          var dimension = diff / heightOriginal * 100;
+          var heightValue = height / 100 * dimension;
+          eventEmitter.emit("setTooltipPosition_".concat(plotId), pX + xRect, yRect + heightValue);
+        }
+        eventEmitter.emit("setTooltipRenderingProps_".concat(plotId), {}, state);
+        eventEmitter.emit("setTooltipVisible_".concat(plotId), xIndex !== null || yIndex !== null);
       });
     }));
     _defineProperty(_this, "handlerMouseLeaveRoot", trottle(function() {
@@ -66,7 +77,7 @@ var Hover = /* @__PURE__ */ (function(_Component) {
         patterns: _this.asProps.patterns
       };
       _this.setState(state, function() {
-        _this.asProps.eventEmitter.emit("setTooltipVisible", false);
+        _this.asProps.eventEmitter.emit("setTooltipVisible_".concat(_this.asProps.plotId), false);
       });
     }));
     return _this;
@@ -79,7 +90,7 @@ var Hover = /* @__PURE__ */ (function(_Component) {
       var eventEmitter = this.asProps.eventEmitter;
       this.unsubscribeMouseMoveRoot = eventEmitter.subscribe("onMouseMoveChart", function(e) {
         e.persist();
-        _this2.handlerMouseMoveRoot(e);
+        _this2.handlerMouseMoveRoot(e, e.currentTarget);
       });
       this.unsubscribeMouseLeaveRoot = eventEmitter.subscribe("onMouseLeaveChart", this.handlerMouseLeaveRoot);
     }

package/lib/esm/Line.mjs

@@ -19,19 +19,19 @@ var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SLine_ldybw_gg_{fill:transparent;stroke-width:3;stroke:var(--intergalactic-chart-palette-order-1, #2bb3ff);transition-property:d;transition-duration:var(--duration_ldybw);transition-timing-function:ease-in-out}.___SLine_ldybw_gg_.__color_ldybw_gg_{stroke:var(--color_ldybw)}.___SLine_ldybw_gg_.__hide_ldybw_gg_{display:none}.___SLine_ldybw_gg_.__transparent_ldybw_gg_{opacity:.3}.___SNull_ldybw_gg_{fill:transparent;stroke:var(--intergalactic-border-primary, #c4c7cf);stroke-dasharray:4}.___SNull_ldybw_gg_.__hide_ldybw_gg_{display:none}.___SLineArea_ldybw_gg_{transition-property:d;transition-duration:var(--duration_ldybw);transition-timing-function:ease-in-out;opacity:.3;fill:var(--intergalactic-chart-palette-order-1, #2bb3ff)}.___SLineArea_ldybw_gg_.__color_ldybw_gg_{fill:var(--color_ldybw)}",
+    ".___SLine_jqqyf_gg_{fill:transparent;stroke-width:3;stroke:var(--intergalactic-chart-palette-order-1, #2bb3ff);transition-property:d;transition-duration:var(--duration_jqqyf);transition-timing-function:ease-in-out}.___SLine_jqqyf_gg_.__color_jqqyf_gg_{stroke:var(--color_jqqyf)}.___SLine_jqqyf_gg_.__hide_jqqyf_gg_{display:none}.___SLine_jqqyf_gg_.__transparent_jqqyf_gg_{opacity:.3}.___SNull_jqqyf_gg_{fill:transparent;stroke:var(--intergalactic-border-primary, #c4c7cf);stroke-dasharray:4}.___SNull_jqqyf_gg_.__hide_jqqyf_gg_{display:none}.___SLineArea_jqqyf_gg_{transition-property:d;transition-duration:var(--duration_jqqyf);transition-timing-function:ease-in-out;opacity:.3;fill:var(--intergalactic-chart-palette-order-1, #2bb3ff)}.___SLineArea_jqqyf_gg_.__color_jqqyf_gg_{fill:var(--color_jqqyf)}",
     /*__inner_css_end__*/
-    "ldybw_gg_"
+    "jqqyf_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLine": "___SLine_ldybw_gg_",
-    "--duration": "--duration_ldybw",
-    "_color": "__color_ldybw_gg_",
-    "--color": "--color_ldybw",
-    "_hide": "__hide_ldybw_gg_",
-    "_transparent": "__transparent_ldybw_gg_",
-    "__SNull": "___SNull_ldybw_gg_",
-    "__SLineArea": "___SLineArea_ldybw_gg_"
+    "__SLine": "___SLine_jqqyf_gg_",
+    "--duration": "--duration_jqqyf",
+    "_color": "__color_jqqyf_gg_",
+    "--color": "--color_jqqyf",
+    "_hide": "__hide_jqqyf_gg_",
+    "_transparent": "__transparent_jqqyf_gg_",
+    "__SNull": "___SNull_jqqyf_gg_",
+    "__SLineArea": "___SLineArea_jqqyf_gg_"
   })
 );
 var LineRoot = /* @__PURE__ */ (function(_Component) {