@evergis/charts 3.1.14 → 3.1.16

package/dist/charts.esm.js

@@ -6,10 +6,10 @@ import ReactDOMServer from 'react-dom/server';
 import { uniqueId } from 'lodash';
 import { unmountComponentAtNode, render } from 'react-dom';
 
-const Wrapper = styled.div `
-  position: relative;
-  width: 100%;
-  box-sizing: border-box;
+const Wrapper = styled.div `
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
 `;
 
 function useNode() {
@@ -57,10 +57,60 @@ const appendSvg = (node, width, height) => {
     return svg;
 };
 
-const SwipeScrollContainer = styled.div `
-  width: 100%;
-  overflow: hidden;
-  user-select: none;
+const drawMarkers = ({ svg, markers, width, left, top, count, yScale }) => {
+    markers?.filter(marker => marker?.value > -1).forEach(marker => {
+        const x = left + ((width - left) / count * marker.value + 1);
+        if (marker.horizontal) {
+            if (marker.line) {
+                svg.append('line')
+                    .style("stroke", marker.lineColor || marker.color || "inherit")
+                    .style("stroke-width", 1)
+                    .style("stroke-dasharray", ("5, 3"))
+                    .attr("x1", left)
+                    .attr("y1", yScale(marker.value) + 1)
+                    .attr("x2", width)
+                    .attr("y2", yScale(marker.value) + 1);
+            }
+            svg.append("text")
+                .attr("y", yScale(marker.value) + 1)
+                .attr("x", left)
+                .attr('text-anchor', 'middle')
+                .attr("class", ["marker", marker.className].filter(Boolean).join(" "))
+                .style("fill", marker?.color || "inherit")
+                .text(marker.label);
+            return;
+        }
+        if (marker.line) {
+            svg.append('line')
+                .style("stroke", marker.lineColor || marker.color || "inherit")
+                .style("stroke-width", 1)
+                .style("stroke-dasharray", ("5, 3"))
+                .attr("x1", x)
+                .attr("y1", 0)
+                .attr("x2", x)
+                .attr("y2", (top - 12));
+        }
+        svg.append("text")
+            .attr("y", top - 4)
+            .attr("x", x)
+            .attr("text-anchor", (_, i) => !marker.align && !i ? "left"
+            : marker.align === "right"
+                ? "end"
+                : marker.align === "left"
+                    ? "start"
+                    : "middle")
+            .attr("class", ["marker", marker.className].filter(Boolean).join(" "))
+            .style("fill", marker?.color || "inherit")
+            .style("font-size", "0.625rem")
+            .style("line-height", "0")
+            .text(marker.label);
+    });
+};
+
+const SwipeScrollContainer = styled.div `
+  width: 100%;
+  overflow: hidden;
+  user-select: none;
 `;
 
 function animate({ duration, timing, draw, }) {
@@ -212,37 +262,37 @@ const getTranslate$1 = ({ anchor, index, translateX, translateY, }) => {
     }
     return `translate(${translateX}px, ${translateY}px)`;
 };
-const Label$2 = styled.div `
-  display: flex;
-  align-items: center;
-  font-size: 12px;
+const Label$2 = styled.div `
+  display: flex;
+  align-items: center;
+  font-size: 12px;
 `;
-const Name$1 = styled.div `
-  text-align: center;
-  max-width: 120px;
+const Name$1 = styled.div `
+  text-align: center;
+  max-width: 120px;
 `;
-const middleBadgeStyles = css `
-  position: absolute;
-  top: 50%;
-  right: 0;
-  transform: translate(calc(100% + 6px), -50%);
+const middleBadgeStyles = css `
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translate(calc(100% + 6px), -50%);
 `;
-const DefaultBadge = styled.div `
-  display: flex;
-  align-items: center;
-  padding: 2px 4px;
-  border-radius: 4px;
-  color: rgb(255, 255, 255);
-  background-color: rgb(144, 197, 61);
-  margin-left: 8px;
+const DefaultBadge = styled.div `
+  display: flex;
+  align-items: center;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: rgb(255, 255, 255);
+  background-color: rgb(144, 197, 61);
+  margin-left: 8px;
 `;
-const MiddleBadge = styled(DefaultBadge) `
-  ${middleBadgeStyles}
+const MiddleBadge = styled(DefaultBadge) `
+  ${middleBadgeStyles}
 `;
-const BadgePrefix = styled.div `
-  margin-left: 4px;
-  font-size: 10px;
-  color: rgba(255, 255, 255, 0.54);
+const BadgePrefix = styled.div `
+  margin-left: 4px;
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.54);
 `;
 
 const radarChartclassNames = {
@@ -257,29 +307,29 @@ const radarChartclassNames = {
     radarLabelBadgePrefix: 'radarLabelBadgePrefix',
     radarCircle: 'radarCircle',
 };
-const SvgWrapper$5 = styled(Wrapper) `
-  .${radarChartclassNames.radarAxis} {
-    path,
-    line,
-    circle {
-      fill: none;
-      stroke-width: 1px;
-      stroke: rgba(149, 149, 149, 0.18);
-    }
-  }
-  .${radarChartclassNames.radarAxisText} {
-    font-size: 12px;
-    fill-opacity: 0.56;
-  }
-  .${radarChartclassNames.radarPolygon} {
-    fill-opacity: 0.06;
-    stroke-width: 2px;
-    fill: rgb(144, 197, 61);
-    stroke: rgb(144, 197, 61);
-  }
-  .${radarChartclassNames.radarCircle} {
-    fill: rgb(144, 197, 61);
-  }
+const SvgWrapper$5 = styled(Wrapper) `
+  .${radarChartclassNames.radarAxis} {
+    path,
+    line,
+    circle {
+      fill: none;
+      stroke-width: 1px;
+      stroke: rgba(149, 149, 149, 0.18);
+    }
+  }
+  .${radarChartclassNames.radarAxisText} {
+    font-size: 12px;
+    fill-opacity: 0.56;
+  }
+  .${radarChartclassNames.radarPolygon} {
+    fill-opacity: 0.06;
+    stroke-width: 2px;
+    fill: rgb(144, 197, 61);
+    stroke: rgb(144, 197, 61);
+  }
+  .${radarChartclassNames.radarCircle} {
+    fill: rgb(144, 197, 61);
+  }
 `;
 
 const getTranslate = ({ anchor, index, translateX, translateY, }) => {
@@ -301,8 +351,8 @@ const LabelContainer$1 = styled.div.attrs(props => ({
     style: {
         transform: getTranslate(props),
     },
-})) `
-  position: absolute;
+})) `
+  position: absolute;
 `;
 
 const degByIndex = (index, count) => {
@@ -575,21 +625,21 @@ const pieChartclassNames = {
     pieTooltipColorBox: 'pieTooltipColorBox',
     pieFullChartTooltipCircle: 'pieFullChartTooltipCircle',
 };
-const SvgWrapper$4 = styled(Wrapper) `
-  .${pieChartclassNames.pieSliceLabel} {
-    fill: #4a4a4a;
-  }
-  .${pieChartclassNames.pieRadialLabel} {
-    position: absolute;
-    max-width: 128px;
-  }
-  .${pieChartclassNames.pieRadialLink} {
-    stroke: #000;
-  }
-  .${pieChartclassNames.pieFullChartTooltipCircle} {
-    fill: transparent;
-    cursor: pointer;
-  }
+const SvgWrapper$4 = styled(Wrapper) `
+  .${pieChartclassNames.pieSliceLabel} {
+    fill: #4a4a4a;
+  }
+  .${pieChartclassNames.pieRadialLabel} {
+    position: absolute;
+    max-width: 128px;
+  }
+  .${pieChartclassNames.pieRadialLink} {
+    stroke: #000;
+  }
+  .${pieChartclassNames.pieFullChartTooltipCircle} {
+    fill: transparent;
+    cursor: pointer;
+  }
 `;
 
 const getMidFactor = (d) => d.startAngle + (d.endAngle - d.startAngle) / 2 < Math.PI ? 1 : -1;
@@ -680,90 +730,90 @@ const drawRadialLabels = ({ arc, enableRadialLabels, global, node, radius, dataR
     }
 };
 
-const TooltipFlex$1 = styled.div `
-  width: 0;
-  height: 0;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  pointer-events: none;
-  white-space: nowrap;
+const TooltipFlex$1 = styled.div `
+  width: 0;
+  height: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  pointer-events: none;
+  white-space: nowrap;
 `;
 const LabelFlex = styled(TooltipFlex$1) ``;
-const LabelFlexCenter = styled(LabelFlex) `
-  align-items: center;
+const LabelFlexCenter = styled(LabelFlex) `
+  align-items: center;
 `;
-const TooltipContainer = styled.div `
-  position: relative;
-  font-size: 11px;
-  color: #fff;
-  margin-bottom: 8px;
-  padding: 4px 6px;
-  background-color: rgba(48, 69, 79, 1);
-  border-radius: 4px;
-  box-shadow: 0 0.1875rem 0.5rem rgba(48, 69, 79, 0.06);
-
-  :before {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    transform: translate(-50%, 100%);
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 4px 3px 0 3px;
-    border-color: rgba(48, 69, 79, 1) transparent transparent transparent;
-  }
+const TooltipContainer = styled.div `
+  position: relative;
+  font-size: 11px;
+  color: #fff;
+  margin-bottom: 8px;
+  padding: 4px 6px;
+  background-color: rgba(48, 69, 79, 1);
+  border-radius: 4px;
+  box-shadow: 0 0.1875rem 0.5rem rgba(48, 69, 79, 0.06);
+
+  :before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, 100%);
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 4px 3px 0 3px;
+    border-color: rgba(48, 69, 79, 1) transparent transparent transparent;
+  }
 `;
-const TooltipGroupName = styled.div `
-  font-size: 14px;
-  margin-bottom: 6px;
+const TooltipGroupName = styled.div `
+  font-size: 14px;
+  margin-bottom: 6px;
 `;
-const TooltipItem = styled.div `
-  display: flex;
-  align-items: center;
-  margin-bottom: 0.25rem;
-
-  &:last-of-type {
-    margin-bottom: 0;
-  }
+const TooltipItem = styled.div `
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.25rem;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
 `;
-const ColFlex = styled.div `
-  display: flex;
-  align-items: center;
-  margin-right: 4px;
+const ColFlex = styled.div `
+  display: flex;
+  align-items: center;
+  margin-right: 4px;
 `;
-const ColorBox = styled.div `
-  margin-right: 4px;
-  width: 10px;
-  height: 10px;
-  border-radius: 2px;
+const ColorBox = styled.div `
+  margin-right: 4px;
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
 `;
-const ColorLine = styled(ColorBox) `
-  height: 2px;
-  border-radius: 0;
+const ColorLine = styled(ColorBox) `
+  height: 2px;
+  border-radius: 0;
 `;
-const Name = styled.div `
-  margin-right: 4px;
+const Name = styled.div `
+  margin-right: 4px;
 `;
-const Value = styled.div `
-  text-align: right;
-  flex-shrink: 0;
-  flex-grow: 1;
+const Value = styled.div `
+  text-align: right;
+  flex-shrink: 0;
+  flex-grow: 1;
 `;
-const Label$1 = styled.div `
-  position: relative;
-  font-size: 11px;
-  color: #fff;
-  font-weight: bold;
-  letter-spacing: 0.52px;
+const Label$1 = styled.div `
+  position: relative;
+  font-size: 11px;
+  color: #fff;
+  font-weight: bold;
+  letter-spacing: 0.52px;
 `;
-const LabelTop = styled(Label$1) `
-  top: 6px;
+const LabelTop = styled(Label$1) `
+  top: 6px;
 `;
-const LabelBottom = styled(Label$1) `
-  bottom: 6px;
+const LabelBottom = styled(Label$1) `
+  bottom: 6px;
 `;
 
 const drawTooltip$3 = ({ fullChartTooltip, global, tooltipRoot, data, tooltipClassName, tooltipBind, renderTooltip, arc, allSlices, tooltipStyle, width, height, radius, }) => {
@@ -1152,53 +1202,53 @@ const calendarChartClassNames = {
     ...legendClassNames,
 };
 const headerHeight = "20px";
-const SvgWrapper$3 = styled(Wrapper) `
-  .${calendarChartClassNames.calendarYear} {
-    display: flex;
-    margin-bottom: 16px;
-  }
-
-  .${calendarChartClassNames.calendarYearTitle} {
-    display: inline-flex;
-    align-items: flex-end;
-    height: ${headerHeight};
-    margin-bottom: 4px;
-    font-weight: bold;
-  }
-
-  .${calendarChartClassNames.calendarHeader} {
-    height: ${headerHeight};
-    margin-bottom: 4px;
-    position: relative;
-    display: flex;
-  }
-
-  .${calendarChartClassNames.calendarMonth} {
-    font-size: 14px;
-    bottom: 0;
-    position: absolute;
-  }
-
-  .${calendarChartClassNames.calendarAxis} {
-    display: flex;
-    flex-direction: column;
-    margin-right: 10px;
-  }
-
-  .${calendarChartClassNames.calendarWeekDay} {
-    font-size: 12px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: flex-end;
-  }
-
-  .${calendarChartClassNames.calendarDays} {
-    position: relative;
-  }
-
-  .${calendarChartClassNames.calendarDay} {
-    position: absolute;
-  }
+const SvgWrapper$3 = styled(Wrapper) `
+  .${calendarChartClassNames.calendarYear} {
+    display: flex;
+    margin-bottom: 16px;
+  }
+
+  .${calendarChartClassNames.calendarYearTitle} {
+    display: inline-flex;
+    align-items: flex-end;
+    height: ${headerHeight};
+    margin-bottom: 4px;
+    font-weight: bold;
+  }
+
+  .${calendarChartClassNames.calendarHeader} {
+    height: ${headerHeight};
+    margin-bottom: 4px;
+    position: relative;
+    display: flex;
+  }
+
+  .${calendarChartClassNames.calendarMonth} {
+    font-size: 14px;
+    bottom: 0;
+    position: absolute;
+  }
+
+  .${calendarChartClassNames.calendarAxis} {
+    display: flex;
+    flex-direction: column;
+    margin-right: 10px;
+  }
+
+  .${calendarChartClassNames.calendarWeekDay} {
+    font-size: 12px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .${calendarChartClassNames.calendarDays} {
+    position: relative;
+  }
+
+  .${calendarChartClassNames.calendarDay} {
+    position: absolute;
+  }
 `;
 
 const draw$3 = (node, props) => {
@@ -1425,67 +1475,67 @@ const lineChartClassNames = {
     lineChartMouseLabelContainer: "lineChartMouseLabelContainer",
     lineChartMouseLabel: "lineChartMouseLabel",
 };
-const SvgWrapper$2 = styled(Wrapper) `
-  .${lineChartClassNames.lineChartYScaleGlobal},
-  .${lineChartClassNames.lineChartXScaleGlobal},
-  .${lineChartClassNames.lineChartGridGlobal} {
-    shape-rendering: crispEdges;
-  }
-
-  .${lineChartClassNames.lineChartLinesGlobal} {
-    fill: none;
-    stroke: steelblue;
-    stroke-width: 1.5px;
-    stroke-linejoin: round;
-    stroke-linecap: round;
-  }
-
-  .${lineChartClassNames.lineChartArea} {
-    fill-opacity: 0.24;
-  }
-
-  .${lineChartClassNames.lineChartGridLineX},
-  .${lineChartClassNames.lineChartGridLineY},
-  .${lineChartClassNames.lineChartMouseLine} {
-    stroke: rgba(149, 149, 149, 0.24);
-  }
-
-  .${lineChartClassNames.lineChartMouseLine},
-  .${lineChartClassNames.lineChartMouseCircle} {
-    transition: opacity linear 200ms;
-    pointer-events: none;
-    stroke-width: 1px;
-  }
-
-  .${lineChartClassNames.lineChartDot} {
-    stroke: #fff;
-    stroke-width: 2px;
-  }
-
-  .${lineChartClassNames.lineChartMouseLine} {
-    shape-rendering: crispEdges;
-  }
-
-  .${lineChartClassNames.lineChartMouseRect} {
-    fill: none;
-    pointer-events: all;
-  }
+const SvgWrapper$2 = styled(Wrapper) `
+  .${lineChartClassNames.lineChartYScaleGlobal},
+  .${lineChartClassNames.lineChartXScaleGlobal},
+  .${lineChartClassNames.lineChartGridGlobal} {
+    shape-rendering: crispEdges;
+  }
+
+  .${lineChartClassNames.lineChartLinesGlobal} {
+    fill: none;
+    stroke: steelblue;
+    stroke-width: 1.5px;
+    stroke-linejoin: round;
+    stroke-linecap: round;
+  }
+
+  .${lineChartClassNames.lineChartArea} {
+    fill-opacity: 0.24;
+  }
+
+  .${lineChartClassNames.lineChartGridLineX},
+  .${lineChartClassNames.lineChartGridLineY},
+  .${lineChartClassNames.lineChartMouseLine} {
+    stroke: rgba(149, 149, 149, 0.24);
+  }
+
+  .${lineChartClassNames.lineChartMouseLine},
+  .${lineChartClassNames.lineChartMouseCircle} {
+    transition: opacity linear 200ms;
+    pointer-events: none;
+    stroke-width: 1px;
+  }
+
+  .${lineChartClassNames.lineChartDot} {
+    stroke: #fff;
+    stroke-width: 2px;
+  }
+
+  .${lineChartClassNames.lineChartMouseLine} {
+    shape-rendering: crispEdges;
+  }
+
+  .${lineChartClassNames.lineChartMouseRect} {
+    fill: none;
+    pointer-events: all;
+  }
 `;
-const TooltipStyles$2 = createGlobalStyle `
-  .${lineChartClassNames.lineChartMouseLabel} {
-    transition: opacity linear 200ms;
-    z-index: 100;
-
-    .${lineChartClassNames.lineChartLabelFlex} {
-      justify-content: flex-start;
-      align-items: center;
-      pointer-events: none;
-    }
-
-    .${lineChartClassNames.lineChartLabel} {
-      margin: 0 0 0 10px;
-    }
-  }
+const TooltipStyles$2 = createGlobalStyle `
+  .${lineChartClassNames.lineChartMouseLabel} {
+    transition: opacity linear 200ms;
+    z-index: 100;
+
+    .${lineChartClassNames.lineChartLabelFlex} {
+      justify-content: flex-start;
+      align-items: center;
+      pointer-events: none;
+    }
+
+    .${lineChartClassNames.lineChartLabel} {
+      margin: 0 0 0 10px;
+    }
+  }
 `;
 
 const drawGrid$2 = ({ svg, yScale, xScale, yTicksCount, lastIndex, drawGridX, drawGridY, }) => {
@@ -1521,17 +1571,17 @@ const drawGrid$2 = ({ svg, yScale, xScale, yTicksCount, lastIndex, drawGridX, dr
     }
 };
 
-const LabelContainer = styled.div `
-  width: 0;
-  height: 0;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  font-size: 12px;
-  white-space: nowrap;
+const LabelContainer = styled.div `
+  width: 0;
+  height: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  font-size: 12px;
+  white-space: nowrap;
 `;
-const Label = styled.div `
-  margin-bottom: 4px;
+const Label = styled.div `
+  margin-bottom: 4px;
 `;
 
 const labelClassName = "d3-chart-label";
@@ -1644,6 +1694,9 @@ const drawTooltip$2 = ({ svg, node, data: argData, xScale, yScale, dynamicCircle
                 let target = null;
                 while (true) {
                     target = Math.floor((beginning + end) / 2);
+                    if (!target) {
+                        break;
+                    }
                     pos = line.getPointAtLength(target);
                     if ((target === end || target === beginning) && pos.x !== x) {
                         break;
@@ -1766,7 +1819,7 @@ const drawTooltip$2 = ({ svg, node, data: argData, xScale, yScale, dynamicCircle
 };
 
 const draw$2 = (node, props) => {
-    const { data: chartData, labels, margin, customYAxisSelection, customXAxisSelection, customYAxis, customXAxis, curve, yAxisPadding, xAxisPadding, drawGridY, drawGridX, withLabels, formatLabel, eachLabel, stacked, dynamicTooltipEnable, dynamicCircleRadius, formatDynamicTooltip, renderTooltip, stackedTooltip, stackedTooltipIndex, tooltipLineTop, customize, customYScale, customLine, tooltipClassName, xScaleItemWidth, areaCurve, dotSnapping, rightAxis, } = props;
+    const { data: chartData, labels, margin, customYAxisSelection, customXAxisSelection, customYAxis, customXAxis, curve, yAxisPadding, xAxisPadding, drawGridY, drawGridX, withLabels, formatLabel, eachLabel, stacked, dynamicTooltipEnable, dynamicCircleRadius, formatDynamicTooltip, renderTooltip, stackedTooltip, stackedTooltipIndex, tooltipLineTop, customize, customYScale, customLine, tooltipClassName, xScaleItemWidth, areaCurve, dotSnapping, rightAxis, markers, } = props;
     if (node !== null && chartData.length) {
         const data = stacked ? stackedData(chartData) : chartData;
         const marginTop = margin ? margin.top : 0;
@@ -1805,6 +1858,7 @@ const draw$2 = (node, props) => {
         const { width: yAxisWidth } = computeDimensions(yAxis);
         yAxis.attr('transform', `translate(${marginLeft + yAxisWidth}, 0)`);
         let yAxisRightWidth = 0;
+        const left = marginLeft + yAxisWidth + (yAxisPadding || 0);
         if (rightAxis) {
             const rightAxisMin = d3.min(rightAxis);
             const rightAxisMax = d3.max(rightAxis);
@@ -1830,7 +1884,7 @@ const draw$2 = (node, props) => {
             .scaleLinear()
             .domain([0, lastIndex])
             .range([
-            marginLeft + yAxisWidth + (yAxisPadding || 0),
+            left,
             width - yAxisRightWidth - marginRight,
         ]);
         const xAxisBottom = d3
@@ -1957,6 +2011,8 @@ const draw$2 = (node, props) => {
                 }
             });
         }
+        const count = data?.[0]?.values?.length || 0;
+        drawMarkers({ svg, markers, width, left, top: height - marginTop, count, yScale });
         d3.select(node)
             .select(`.${labelClassName}`)
             .remove();
@@ -2114,65 +2170,66 @@ const barChartClassNames = {
     ...labelClassnames,
     ...barChartLinesClassNames,
 };
-const SvgWrapper$1 = styled(Wrapper) `
-  display: ${({ selectable }) => selectable && "inline-block"};
-  user-select: ${({ selectable }) => selectable && "none"};
-  width: ${({ selectable }) => selectable && "auto"};
-
-  line {
-    stroke-width: 1px;
-    shape-rendering: crispEdges;
-  }
-
-  .${barChartClassNames.barChartGridLineX},
-  .${barChartClassNames.barChartGridLineY} {
-    stroke: rgba(48, 69, 79, 0.06);
-  }
-
-  .${barChartClassNames.barChartMouseRect} {
-  }
-
-  .${barChartClassNames.barChartMouseRect} {
-    fill: none;
-    pointer-events: all;
-  }
-
-  .${barChartClassNames.barChartLinesGlobal} {
-    stroke-width: 1.5px;
-    stroke-linejoin: round;
-    stroke-linecap: round;
-  }
-
-  .${barChartClassNames.barChartLine} {
-    shape-rendering: auto;
-  }
-
-  .${barChartClassNames.barChartArea} {
-    fill-opacity: 0.24;
-  }
-
-  .${barChartClassNames.barChartSelection} {
-    position: absolute;
-    top: 0;
-    width: 0;
-    background: rgba(0, 170, 255, 0.06);
-    box-shadow: 1px 0 0 #00AAFF, -1px 0 0 #00AAFF;
-    pointer-events: none;
-  }
+const SvgWrapper$1 = styled(Wrapper) `
+  display: ${({ selectable }) => selectable && "inline-block"};
+  user-select: ${({ selectable }) => selectable && "none"};
+  width: ${({ selectable }) => selectable && "auto"};
+
+  line {
+    stroke-width: 1px;
+    shape-rendering: crispEdges;
+  }
+
+  .${barChartClassNames.barChartGridLineX},
+  .${barChartClassNames.barChartGridLineY} {
+    stroke: rgba(48, 69, 79, 0.06);
+  }
+
+  .${barChartClassNames.barChartMouseRect} {
+  }
+
+  .${barChartClassNames.barChartMouseRect} {
+    fill: none;
+    pointer-events: all;
+  }
+
+  .${barChartClassNames.barChartLinesGlobal} {
+    stroke-width: 1.5px;
+    stroke-linejoin: round;
+    stroke-linecap: round;
+  }
+
+  .${barChartClassNames.barChartLine} {
+    shape-rendering: auto;
+  }
+
+  .${barChartClassNames.barChartArea} {
+    fill-opacity: 0.24;
+  }
+
+  .${barChartClassNames.barChartSelection} {
+    position: absolute;
+    top: 0;
+    width: 0;
+    background: rgba(0, 170, 255, 0.06);
+    box-shadow: 1px 0 0 #00AAFF, -1px 0 0 #00AAFF;
+    pointer-events: none;
+  }
 `;
-const TooltipStyles$1 = createGlobalStyle `
-  .${barChartClassNames.barChartMouseTooltip} {
-    z-index: 100;
-    transition: all linear 144ms;
-
-    .${barChartClassNames.barChartTooltipItem} {
-      margin-bottom: 4px;
-      
-      :last-of-type {
-        margin-bottom: 0;
-      }
-    }
-  }
+const TooltipStyles$1 = createGlobalStyle `
+  .${barChartClassNames.barChartMouseTooltip} {
+    z-index: 100;
+    transition: all linear 144ms;
+
+    .${barChartClassNames.barChartTooltipItem} {
+      padding: 0.125rem;
+      margin-bottom: 4px;
+
+      :last-of-type {
+        margin-bottom: 0;
+      }
+    }
+  }
 `;
 
 const useSelection = (node, props) => {
@@ -2765,8 +2822,9 @@ const draw$1 = (node, props) => {
         });
         customYAxis && customYAxis(yAxis);
         const { width: yAxisWidth } = computeDimensions(yAxis);
+        const left = marginLeft + yAxisWidth + (yAxisPadding || 0);
         const range = [
-            marginLeft + yAxisWidth + (yAxisPadding || 0),
+            left,
             width - marginRight,
         ];
         const xScale = d3
@@ -2844,48 +2902,8 @@ const draw$1 = (node, props) => {
         const bars = drawBars
             ? drawBars({ groups, yScale, marshalledData, barWidth })
             : getBars({ groups, barWidth });
-        markers.forEach((marker) => {
-            if (!marker) {
-                return;
-            }
-            if (marker.horizontal) {
-                if (marker.line) {
-                    svg.append('line')
-                        .style("stroke", marker.lineColor || marker.color || "inherit")
-                        .style("stroke-width", 1)
-                        .style("stroke-dasharray", ("5, 3"))
-                        .attr("x1", marginLeft + yAxisWidth)
-                        .attr("y1", yScale(marker.value) + 1)
-                        .attr("x2", width)
-                        .attr("y2", yScale(marker.value) + 1);
-                }
-                svg.append("text")
-                    .attr("y", yScale(marker.value) + 1)
-                    .attr("x", marginLeft + yAxisWidth)
-                    .attr('text-anchor', 'middle')
-                    .attr("class", ["marker", marker.className].filter(Boolean).join(" "))
-                    .style("fill", marker?.color || "inherit")
-                    .text(marker.label);
-                return;
-            }
-            if (marker.line) {
-                svg.append('line')
-                    .style("stroke", marker.lineColor || marker.color || "inherit")
-                    .style("stroke-width", 1)
-                    .style("stroke-dasharray", ("5, 3"))
-                    .attr("x1", width / data.length * marker.value + 1)
-                    .attr("y1", 0)
-                    .attr("x2", width / data.length * marker.value + 1)
-                    .attr("y2", (height - marginTop - marginBottom + 8));
-            }
-            svg.append("text")
-                .attr("y", height - 2)
-                .attr("x", width / data.length * marker.value + 1)
-                .attr('text-anchor', marker.align === 'right' ? 'end' : marker.align === 'left' ? 'start' : 'middle')
-                .attr("class", ["marker", marker.className].filter(Boolean).join(" "))
-                .style("fill", marker?.color || "inherit")
-                .text(marker.label);
-        });
+        const count = data?.length || 0;
+        drawMarkers({ svg, markers, width, left, top: height - marginTop, count, yScale });
         let lines = null;
         if (Array.isArray(lineData) && lineData.length > 0) {
             lines = drawLines({
@@ -3019,45 +3037,45 @@ const horizontalBarChartClassNames = {
     horizontalBarChartTooltipName: "horizontalBarChartTooltipName",
     horizontalBarChartTooltipValue: "horizontalBarChartTooltipValue",
 };
-const Table = styled.table `
-  width: 100%;
+const Table = styled.table `
+  width: 100%;
 `;
-const LabelCell = styled.div `
-  text-align: right;
+const LabelCell = styled.div `
+  text-align: right;
 `;
-const BarFlex = styled.div `
-  width: 100%;
-  display: flex;
-  height: 1rem;
+const BarFlex = styled.div `
+  width: 100%;
+  display: flex;
+  height: 1rem;
 `;
-const BarsTd = styled.td `
-  width: 100%;
-  position: relative;
-  vertical-align: middle;
+const BarsTd = styled.td `
+  width: 100%;
+  position: relative;
+  vertical-align: middle;
 `;
-const TooltipFlex = styled(TooltipFlex$1) `
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  will-change: left, top;
+const TooltipFlex = styled(TooltipFlex$1) `
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  will-change: left, top;
 `;
-const StackSumContainer = styled.div `
-  position: relative;
+const StackSumContainer = styled.div `
+  position: relative;
 `;
-const StackSum = styled.div `
-  white-space: nowrap;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(0, -50%);
+const StackSum = styled.div `
+  white-space: nowrap;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(0, -50%);
 `;
-const StackWrapper = styled.div `
-  position: absolute;
-  top: 0;
-  display: flex;
-  justify-content: flex-start;
-  height: 100%;
+const StackWrapper = styled.div `
+  position: absolute;
+  top: 0;
+  display: flex;
+  justify-content: flex-start;
+  height: 100%;
 `;
 
 const Tooltip$1 = ({ renderTooltip, bars, style, className, }) => {
@@ -3109,10 +3127,10 @@ const useStackWrapper = (stackedTooltip) => {
         : ({ children }) => (jsx(Fragment$1, { children: children })), [stackedTooltip]);
 };
 
-const BarStyled = styled.div `
-  position: relative;
-  display: inline-flex;
-  height: 100%;
+const BarStyled = styled.div `
+  position: relative;
+  display: inline-flex;
+  height: 100%;
 `;
 
 const Bar = ({ withTooltip, bar, formatNativeTitle, tooltipBind, mouseMove, mouseLeave, pointerEventsNone, isFirstChild, isLastChild, isOnlyChild, }) => {
@@ -3129,23 +3147,23 @@ const Bar = ({ withTooltip, bar, formatNativeTitle, tooltipBind, mouseMove, mous
         }, title: formatNativeTitle ? formatNativeTitle(bar) : "", onMouseOver: onMouseMove, onMouseMove: tooltipBind ? onMouseMove : void 0, onMouseOut: onMouseLeave }));
 };
 
-const TickTd = styled.td `
-  position: relative;
+const TickTd = styled.td `
+  position: relative;
 `;
-const Ticks = styled.div `
-  position: relative;
-  height: 1rem;
+const Ticks = styled.div `
+  position: relative;
+  height: 1rem;
 `;
-const Tick = styled.div `
-  white-space: nowrap;
-  width: 0;
-  height: 0;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
+const Tick = styled.div `
+  white-space: nowrap;
+  width: 0;
+  height: 0;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 `;
 
 const hundred = 100;
@@ -3244,29 +3262,29 @@ const bubbleChartClassNames = {
     bubbleChartTooltipFlex: "bubbleChartTooltipFlex",
     bubbleChartTip: "bubbleChartTip",
 };
-const SvgWrapper = styled(Wrapper) `
-  .${bubbleChartClassNames.bubbleChartYAxis},
-  .${bubbleChartClassNames.bubbleChartXAxis},
-  .${bubbleChartClassNames.bubbleChartGridGlobal} {
-    shape-rendering: crispEdges;
-  }
-
-  .${bubbleChartClassNames.bubbleChartGridLineX},
-  .${bubbleChartClassNames.bubbleChartGridLineY} {
-    stroke: rgba(149, 149, 149, 0.24);
-  }
-
-  .${bubbleChartClassNames.bubbleChartYScaleLabel} {
-    font-size: 10px;
-  }
+const SvgWrapper = styled(Wrapper) `
+  .${bubbleChartClassNames.bubbleChartYAxis},
+  .${bubbleChartClassNames.bubbleChartXAxis},
+  .${bubbleChartClassNames.bubbleChartGridGlobal} {
+    shape-rendering: crispEdges;
+  }
+
+  .${bubbleChartClassNames.bubbleChartGridLineX},
+  .${bubbleChartClassNames.bubbleChartGridLineY} {
+    stroke: rgba(149, 149, 149, 0.24);
+  }
+
+  .${bubbleChartClassNames.bubbleChartYScaleLabel} {
+    font-size: 10px;
+  }
 `;
-const TooltipStyles = createGlobalStyle `
-  .${bubbleChartClassNames.bubbleChartTooltipContainer} {
-    position: absolute;
-    transition: opacity 150ms cubic-bezier(0.2, 1, 0.6, 1);
-    pointer-events: none;
-    z-index: 1;
-  }
+const TooltipStyles = createGlobalStyle `
+  .${bubbleChartClassNames.bubbleChartTooltipContainer} {
+    position: absolute;
+    transition: opacity 150ms cubic-bezier(0.2, 1, 0.6, 1);
+    pointer-events: none;
+    z-index: 1;
+  }
 `;
 
 const drawGrid = ({ svg, yScale, xScale, yTicksCount, drawGridX, drawGridY, }) => {
@@ -3303,14 +3321,14 @@ const drawGrid = ({ svg, yScale, xScale, yTicksCount, drawGridX, drawGridY, }) =
     }
 };
 
-const Tooltip = styled.div `
-  width: 0;
-  height: 0;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  font-size: 12px;
-  white-space: nowrap;
+const Tooltip = styled.div `
+  width: 0;
+  height: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  font-size: 12px;
+  white-space: nowrap;
 `;
 
 const drawTooltip = ({ bubbles, tooltipRoot, tooltipClassName, renderTooltip, }) => {
@@ -3514,5 +3532,5 @@ const BubbleChart = (props) => {
 };
 BubbleChart.defaultProps = bubbleChartDefaultProps;
 
-export { BarChart, BubbleChart, CalendarChart, Wrapper as ChartWrapper, HorizontalBarChart, LineChart, PieChart, RadarChart, SwipeScroll, appendSvg, barChartClassNames, bubbleChartClassNames, calendarChartClassNames, horizontalBarChartClassNames, lineChartClassNames, pieChartclassNames, radarChartclassNames, useNode, useResize };
+export { BarChart, BubbleChart, CalendarChart, Wrapper as ChartWrapper, HorizontalBarChart, LineChart, PieChart, RadarChart, SwipeScroll, appendSvg, barChartClassNames, bubbleChartClassNames, calendarChartClassNames, drawMarkers, horizontalBarChartClassNames, lineChartClassNames, pieChartclassNames, radarChartclassNames, useNode, useResize };
 //# sourceMappingURL=charts.esm.js.map