Changes in transaction chart for dark mode

Real-Dev-Squad · Nov 5, 2021 · 1225995 · 1225995
1 parent 6224ca0
commit 1225995
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/components/transaction-chart/index.js b/components/transaction-chart/index.js
@@ -38,7 +38,7 @@ function getDataset(transactionData) {
   };
 }
 
-const TransactionChart = ({ transactionChartData }) => {
+const TransactionChart = ({ transactionChartData, theme }) => {
   const [chartData, setChartData] = useState({});
   useEffect(() => {
     const chart = () => {
@@ -62,6 +62,7 @@ const TransactionChart = ({ transactionChartData }) => {
               {
                 ticks: {
                   autoSkip: true,
+                  fontColor: theme === 'light' ? '#666' : '#fff',
                 },
                 gridLines: {
                   display: true,
@@ -70,6 +71,9 @@ const TransactionChart = ({ transactionChartData }) => {
             ],
             xAxes: [
               {
+                ticks: {
+                  fontColor: theme === 'light' ? '#666' : '#fff',
+                },
                 gridLines: {
                   display: true,
                 },

diff --git a/pages/index.js b/pages/index.js
@@ -53,6 +53,7 @@ export default function Home() {
                   <div className={`${styles.card} ${styles.content}`}>
                     <TransactionChart
                       transactionChartData={transactionChartData}
+                      theme={theme}
                     />
                   </div>
                 </div>