diff --git a/frontend/src/Components/NewCharts/LineChart.js b/frontend/src/Components/NewCharts/LineChart.js
index 9dc56e33..ca4fd802 100644
--- a/frontend/src/Components/NewCharts/LineChart.js
+++ b/frontend/src/Components/NewCharts/LineChart.js
@@ -3,6 +3,7 @@ import { Line } from 'react-chartjs-2';
 import { tooltipLanguage } from '../../util/tooltipLanguage';
 import { usePopper } from 'react-popper';
 import styled from 'styled-components';
+import DataLoading from '../Charts/ChartPrimitives/DataLoading';
 
 export const Tooltip = styled.div`
   background: #333;
@@ -97,6 +98,10 @@ export default function LineChart({
     popperElement.removeAttribute('data-show');
   };
 
+  if (!data.datasets.length) {
+    return <DataLoading />;
+  }
+
   return (
     <>
       {displayStopPurposeTooltips && (
diff --git a/frontend/src/Components/NewCharts/PieChart.js b/frontend/src/Components/NewCharts/PieChart.js
index 57c43775..5b4fd601 100644
--- a/frontend/src/Components/NewCharts/PieChart.js
+++ b/frontend/src/Components/NewCharts/PieChart.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Pie } from 'react-chartjs-2';
+import DataLoading from '../Charts/ChartPrimitives/DataLoading';
 
 export default function PieChart({
   data,
@@ -31,6 +32,9 @@ export default function PieChart({
             return `${context.parsed}%`;
           },
         },
+        titleColor: '#000',
+        bodyColor: '#000',
+        backgroundColor: 'rgba(255, 255, 255, 1.0)',
       },
       title: {
         display: displayTitle,
@@ -57,11 +61,11 @@ export default function PieChart({
             }
             const text = `${chart.data.labels[index]}: ${chart.data.datasets[0].data[index]}%`;
             const textWidth = ctx.measureText(text).width;
-            ctx.fillStyle = 'rgba(0, 0, 0, 0.8)';
+            ctx.fillStyle = 'rgba(255, 255, 255, 1)';
             const height = y - 15 - offsetHeight;
             ctx.fillRect(x - (textWidth + 10) / 2, height, textWidth + 10, 20);
 
-            ctx.fillStyle = 'rgba(0, 0, 0, 0.8)';
+            ctx.fillStyle = 'rgba(255, 255, 255, 1)';
             ctx.beginPath();
             ctx.moveTo(x, y + 15 - offsetHeight);
             ctx.lineTo(x - 10, y - 5 - offsetHeight);
@@ -69,8 +73,8 @@ export default function PieChart({
             ctx.fill();
             ctx.restore();
 
-            ctx.font = '12px Arial';
-            ctx.fillStyle = 'white';
+            ctx.font = '14px Arial';
+            ctx.fillStyle = 'black';
             ctx.fillText(text, x - textWidth / 2, y - offsetHeight);
             ctx.restore();
           }
@@ -98,6 +102,10 @@ export default function PieChart({
 
   const noData = data.datasets[0].data.every((v) => parseInt(v, 10) === 0);
 
+  if (!data.datasets.length) {
+    return <DataLoading />;
+  }
+
   return (
     <>
       {noData && <div style={{ textAlign: 'center' }}>No Data Found</div>}