diff --git a/src/components/dialog/observation-chart.js b/src/components/dialog/observation-chart.js
index 07b55621..1be97e52 100644
--- a/src/components/dialog/observation-chart.js
+++ b/src/components/dialog/observation-chart.js
@@ -1,6 +1,6 @@
-import React, {Fragment} from 'react';
-import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
+import React from 'react';
 import axios from 'axios';
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Legend, ResponsiveContainer, Tooltip } from 'recharts';
 import { useQuery, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 const queryClient = new QueryClient();
@@ -57,16 +57,16 @@ function CreateObsChart(url) {
 
     // render the chart
     return (
-        <Fragment>
+        <ResponsiveContainer width="100%" height="100%">
             { status === 'pending' ? (
-                'Loading...'
+                <div>Loading...</div>
             ) : status === 'error' ? (
-                <span>Error: {error.message}</span>
+                <div>Error: {error.message}</div>
             ) : (
-                <LineChart width={590} height={300} data={data} margin={{ top: 0, right: 0, left: 0, bottom: 0 }}>
+                <LineChart width={590} height={300} data={data} margin={{ top: 10, right: 0, left: -10, bottom: 0 }}>
                     <CartesianGrid strokeDasharray="3 3" />
-                    <XAxis dataKey="time" />
-                    <YAxis domain={['dataMin', 'dataMax']} />
+                    <XAxis dataKey="time" allowDuplicatedCategory={false} />
+                    <YAxis domain={['auto', 'auto']}/>
                     <Tooltip />
                     <Legend verticalAlign="bottom" height={30} />
                     <Line type="monotone" dataKey="Observations" stroke="gray" strokeWidth={2} dot={false} isAnimationActive={false} />
@@ -75,7 +75,7 @@ function CreateObsChart(url) {
                     <Line type="monotone" dataKey="Difference (APS-OBS)" stroke="red" strokeWidth={2} dot={false} isAnimationActive={false} />
                 </LineChart>
             )}
-        </Fragment>
+        </ResponsiveContainer>
     );
 }
 
@@ -118,10 +118,27 @@ function csvToJSON(csvData) {
         // remove the timezone from the time value
         ret_val.map(function (e){
             e.time = e.time.substring(0, e.time.split(':', 2).join(':').length);
-            if (e["APS Nowcast"]) e["APS Nowcast"] = +parseFloat(e["APS Nowcast"]).toFixed(4);
-            if (e["Observations"]) e["Observations"] = +parseFloat(e["Observations"]).toFixed(4);
-            if (e["NOAA Tidal Predictions"]) e["NOAA Tidal Predictions"] = +parseFloat(e["NOAA Tidal Predictions"]).toFixed(3);
-            if (e["Difference (APS-OBS)"]) e["Difference (APS-OBS)"] = +parseFloat(e["Difference (APS-OBS)"]).toFixed(3);
+
+            // data that is missing a value will not result in plotting
+            if (e["APS Nowcast"])
+                e["APS Nowcast"] = +parseFloat(e["APS Nowcast"]).toFixed(4);
+            else
+                e["APS Nowcast"] = null;
+
+            if (e["Observations"])
+                e["Observations"] = +parseFloat(e["Observations"]).toFixed(4);
+            else
+                e["Observations"] = null;
+
+            if (e["NOAA Tidal Predictions"])
+                e["NOAA Tidal Predictions"] = +parseFloat(e["NOAA Tidal Predictions"]).toFixed(3);
+            else
+                e["NOAA Tidal Predictions"] = null;
+
+            if (e["Difference (APS-OBS)"])
+                e["Difference (APS-OBS)"] = +parseFloat(e["Difference (APS-OBS)"]).toFixed(3);
+            else
+                e["Difference (APS-OBS)"] = null;
         });
 
         // return the json data representation