fix #4868; reflect marker shapes in tooltip

Author: junedchhipa

src/assets/apexcharts.css

@@ -149,12 +149,74 @@ rect.legend-mouseover-inactive,
 }
 
 .apexcharts-tooltip-marker {
-  width: 12px;
-  height: 12px;
+  display: inline-block;
   position: relative;
-  top: 0;
-  margin-right: 10px;
-  border-radius: 50%
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+  line-height: 16px;
+  margin-right: 4px;
+  text-align: center;
+  vertical-align: middle;
+  color: inherit;
+}
+
+.apexcharts-tooltip-marker::before {
+  content: "";
+  display: inline-block;
+  width: 100%;
+  text-align: center;
+  color: currentcolor;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  font-size: 26px;
+  line-height: 14px;
+  font-weight: 900;
+}
+
+.apexcharts-tooltip-marker[shape="circle"]::before {
+  content: "\25CF";
+}
+
+.apexcharts-tooltip-marker[shape="square"]::before,
+.apexcharts-tooltip-marker[shape="rect"]::before {
+  content: "\25A0";
+  transform: translate(-1px, -2px);
+}
+
+.apexcharts-tooltip-marker[shape="line"]::before {
+  content: "\2500";
+}
+
+.apexcharts-tooltip-marker[shape="diamond"]::before {
+  content: "\25C6";
+  font-size: 28px;
+}
+
+.apexcharts-tooltip-marker[shape="triangle"]::before {
+  content: "\25B2";
+  font-size: 22px;
+}
+
+.apexcharts-tooltip-marker[shape="cross"]::before {
+  content: "\2715";
+  font-size: 18px;
+}
+
+.apexcharts-tooltip-marker[shape="plus"]::before {
+  content: "\2715";
+  transform: rotate(45deg) translate(-1px, -1px);
+  font-size: 18px;
+}
+
+.apexcharts-tooltip-marker[shape="star"]::before {
+  content: "\2605";
+  font-size: 18px;
+}
+
+.apexcharts-tooltip-marker[shape="sparkle"]::before {
+  content: "\2726";
+  font-size: 20px;
 }
 
 .apexcharts-tooltip-series-group {

src/modules/tooltip/Labels.js

@@ -268,7 +268,7 @@ export default class Labels {
     ttItemsChildren = ttItems[t].children
 
     if (w.config.tooltip.fillSeriesColor) {
-      ttItems[t].style.backgroundColor = pColor
+      ttItems[t].style.color = pColor
       ttItemsChildren[0].style.display = 'none'
     }
 
@@ -309,7 +309,7 @@ export default class Labels {
         pColor = w.config.tooltip.marker.fillColors[t]
       }
 
-      ttItemsChildren[0].style.backgroundColor = pColor
+      ttItemsChildren[0].style.color = pColor
     }
 
     if (!w.config.tooltip.marker.show) {
@@ -325,7 +325,7 @@ export default class Labels {
 
     if (goalVals.length && w.globals.seriesGoals[t]) {
       const createGoalsHtml = () => {
-        let gLabels = '<div >'
+        let gLabels = '<div>'
         let gVals = '<div>'
         goalVals.forEach((goal, gi) => {
           gLabels += ` <div style="display: flex"><span class="apexcharts-tooltip-marker" style="background-color: ${goal.attrs.strokeColor}; height: 3px; border-radius: 0; top: 5px;"></span> ${goal.attrs.name}</div>`

src/modules/tooltip/Tooltip.js

@@ -147,7 +147,17 @@ export default class Tooltip {
 
       let point = document.createElement('span')
       point.classList.add('apexcharts-tooltip-marker')
-      point.style.backgroundColor = w.globals.colors[i]
+      point.style.color = w.globals.colors[i]
+
+      console.log(w.globals.colors)
+
+      let mShape = w.config.markers.shape
+      let shape = mShape
+      if (Array.isArray(mShape)) {
+        shape = mShape[i]
+      }
+
+      point.setAttribute('shape', shape)
       gTxt.appendChild(point)
 
       const gYZ = document.createElement('div')