diff --git a/src/_components/boxChart/BoxDoughnutBarChart.js b/src/_components/boxChart/BoxDoughnutBarChart.js
index 9a18dca..3a0f49b 100644
--- a/src/_components/boxChart/BoxDoughnutBarChart.js
+++ b/src/_components/boxChart/BoxDoughnutBarChart.js
@@ -43,11 +43,23 @@ export default function BoxDoughnutBarChart({
-
-
{current}
-
- {target > 0 ? target : '...'}
-
+
+
+
+ {current}
+ Số lượng đã tham gia: {current}
+
+
+
+
+ {target > 0 ? target : '...'}
+ Tổng số: {target > 0 ? target : '...'}
+
+
diff --git a/src/_components/boxChart/BoxDoughnutChar.js b/src/_components/boxChart/BoxDoughnutChar.js
index a20cc9d..c0ffd87 100644
--- a/src/_components/boxChart/BoxDoughnutChar.js
+++ b/src/_components/boxChart/BoxDoughnutChar.js
@@ -10,8 +10,24 @@ export default function BoxDoughnutChart({data = [], title, propsContainer}) {
const renderStats = () => {
return (
<>
- {current}
- {target > 0 ? target : '...'}
+
+
+
+ {current}
+ Số lượng đã tham gia: {current}
+
+
+
+
+ {target > 0 ? target : '...'}
+ Tổng số: {target > 0 ? target : '...'}
+
+
+
>
)
}
diff --git a/src/_components/boxChart/boxChart.scss b/src/_components/boxChart/boxChart.scss
index e22ff06..4c65b41 100644
--- a/src/_components/boxChart/boxChart.scss
+++ b/src/_components/boxChart/boxChart.scss
@@ -12,7 +12,7 @@
}
@media (max-width: 1599px) {
- max-width: 220px;
+ max-width: 260px;
}
.box-chart-title {
@@ -65,7 +65,35 @@
width: 300px;
@media (max-width: 1750px) {
- max-width: 220px;
+ max-width: 240px;
}
}
+}
+
+.tooltip {
+ position: relative;
+ display: inline-block;
+
+ .tooltiptext {
+ visibility: hidden;
+ width: max-content;
+ background-color: #fff;
+ color: #fff;
+ text-align: center;
+ border-radius: 6px;
+ padding: 5px;
+ position: absolute;
+ z-index: 1;
+ bottom: 125%;
+ left: 50%;
+ transform: translateX(-50%);
+ opacity: 0;
+ transition: opacity 0.3s;
+ font-size: 1.4rem;
+ }
+
+ &:hover .tooltiptext {
+ visibility: visible;
+ opacity: 1;
+ }
}
\ No newline at end of file