Chart fixed

src/assets/styles/_chartTable.scss

@@ -39,10 +39,6 @@
 }
 
 @media (max-width: 1500px) {
-  .table {
-    max-width: 100%;
-  }
-
   .table-top {
     gap: 1.8rem;
   }
@@ -64,6 +60,14 @@
   .table {
     max-width: 100%;
   }
+
+  .table-row {
+    gap: 1rem;
+
+    div {
+      font-size: 1.4rem;
+    }
+  }
 }
 
 @media (max-width: 500px) {

src/assets/styles/_dataChart.scss

@@ -64,9 +64,9 @@
 }
 
 .chart-data {
-  display: flex;
-  gap: 3.9rem;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 2.4rem;
 }
 
 @media (max-width: 1500px) {
@@ -80,21 +80,23 @@
     display: flex;
     justify-content: center;
   }
+}
+
+@media (max-width: 1200px) {
+  .tab {
+    font-size: 1.4rem;
+  }
 
   .chart-data {
     flex-direction: column;
   }
 }
 
-@media (max-width: 1200px) {
-  .tab {
-    font-size: 1.6rem;
-  }
-}
-
-@media (max-width: 1200px) {
-  .tab {
-    font-size: 1.4rem;
+@media (max-width: 1100px) {
+  .chart-data {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 2.4rem;
   }
 }
 

src/assets/styles/_general.scss

@@ -8,9 +8,9 @@
 }
 
 .container {
-  padding: 0 1.5rem;
+  padding: 0 2rem;
   margin: 0 auto;
-  max-width: 154.2rem;
+  max-width: 155.2rem;
   width: 100%;
   // overflow-x: hidden;
 }

src/assets/styles/_lineChart.scss

@@ -1,20 +1,37 @@
 .line-chart {
-  position: relative;
   width: 70rem;
   height: 35.5rem;
   overflow: hidden;
 }
 
-@media (max-width: 1500px) {
+@media (max-width: 1440px) {
   .line-chart {
-    width: 80%;
-    height: 100%;
+    width: 60rem;
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 1200px) {
   .line-chart {
     width: 100%;
-    height: 100%;
+    height: 35.5rem;
   }
 }
+
+@media (max-width: 1100px) {
+  .line-chart {
+    height: 30rem;
+  }
+}
+
+@media (max-width: 425px) {
+  .line-chart {
+    height: 20rem;
+  }
+}
+
+// @media (max-width: 768px) {
+//   .line-chart {
+//     width: 100%;
+//     height: 100%;
+//   }
+// }

src/components/LineChart.jsx

@@ -3,15 +3,15 @@ import { Line } from 'react-chartjs-2';
 import {
   Chart as ChartJS,
   LineElement,
-  PointElement,
-  LinearScale,
-  Title,
   CategoryScale,
+  LinearScale,
+  PointElement,
+  Tooltip,
 } from 'chart.js';
 import { Api } from '../helpers/api';
 import { useState, useEffect } from 'react';
 
-ChartJS.register(LineElement, PointElement, LinearScale, Title, CategoryScale);
+ChartJS.register(LineElement, PointElement, LinearScale, Tooltip, CategoryScale);
 
 const LineChart = ({ activeRow }) => {
   const [dataLineChart, setDataLineChart] = useState();
@@ -67,7 +67,8 @@ const LineChart = ({ activeRow }) => {
   };
 
   const options = {
-    responsive: true,
+    // responsive: true,
+    maintainAspectRatio: false,
     radius: 5,
     hitRadius: 30,
     hoverRadius: 7,
@@ -78,8 +79,6 @@ const LineChart = ({ activeRow }) => {
         },
       },
       y: {
-        // min: 2,
-        // max: 5,
         ticks: {
           callback: (value) => value,
         },

src/pages/Home.jsx

@@ -11,6 +11,7 @@ import DataChart from '../components/DataChart';
 // Icons
 import arrow from '../assets/icons/arrow.svg';
 import { Api } from '../helpers/api';
+import { dateReverse } from '../helpers/functions';
 
 const Home = () => {
   // Sets
@@ -107,7 +108,7 @@ const Home = () => {
                             key={news.id}
                             title={news.title}
                             shortDes={news.short_description}
-                            date={news.date}
+                            date={dateReverse(news.date)}
                             image={news.image}
                           />
                         );