Feat : chart v1

src/_components/boxChart/BoxDoughnutBarChart.js

@@ -71,7 +71,7 @@ export default function BoxDoughnutBarChart({
       {subTitleLine && <p className='box-chart-subtitle'>{subTitleLine}</p>}
       {dataBarChart.length > 0 ? (
         <div className='chart-container'>
-          <div className='flex-1' style={{ padding: '1.6rem 0', height: '100%', width: '360px' }}>
+          <div className='flex-1' style={{ padding: '1.6rem 0', height: '100%'}}>
             <VerticalBarChart data={dataBarChart} labels={labelsBarChart} />
           </div>
         </div>

src/_components/boxChart/boxChart.scss

@@ -60,13 +60,13 @@
   }
 
   .chart-container {
-    overflow-x: scroll;
+    // overflow-x: scroll;
     height: 100%;
-    width: 300px;
+    // width: 300px;
 
-    @media (max-width: 1750px) {
+    // @media (max-width: 1750px) {
-      max-width: 240px;
+    //   max-width: 240px;
-    }
+    // }
   }
 }
 

src/_components/chart/VerticalBarChart.js

@@ -15,7 +15,8 @@ export function VerticalBarChart({data = [], labels = []}) {
       maxValue = item;
     }
   })
-  // labels = labels?.map((item) => item.replace('Tuần', 'W'));
+  
+  labels = labels?.map(week => week.split(" "));
 
   const options = {
     responsive: true,
@@ -24,15 +25,21 @@ export function VerticalBarChart({data = [], labels = []}) {
       legend: {
         display: false
       },
+      // title: {
+      //   display: true,
+      //   text: 'Tuần',
+      //   align: 'start',
+      //   position: 'bottom',
+      // },
       datalabels: {
-        anchor: 'end', // Position of the labels (start, end, center, etc.)
+        anchor: 'end',
-        align: 'end', // Alignment of the labels (start, end, center, etc.)
+        align: 'end',
-        color: 'blue', // Color of the labels
+        color: 'blue',
         font: {
           weight: 'bold',
         },
         formatter: function (value, context) {
-            return value; // Display the actual data value
+            return value;
         }
       }
     },
@@ -40,7 +47,6 @@ export function VerticalBarChart({data = [], labels = []}) {
       x: {
         ticks: {
           maxRotation: 0,
-          // scrollX : true,
         },
       },
       y: {