diff --git a/src/AbstractChart.tsx b/src/AbstractChart.tsx
index 4f7b124f..9d899147 100644
--- a/src/AbstractChart.tsx
+++ b/src/AbstractChart.tsx
@@ -332,7 +332,7 @@ class AbstractChart<
   > & { data: number[] }) => {
     const { yAxisInterval = 1 } = this.props;
 
-    return [...new Array(Math.ceil(data.length / yAxisInterval))].map(
+    return [...new Array(Math.ceil(data == null ? 0 : data.length / yAxisInterval))].map(
       (_, i) => {
         return (
           <Line
@@ -471,8 +471,8 @@ class AbstractChart<
         <LinearGradient
           id="backgroundGradient"
           x1={0}
-          y1={height}
-          x2={width}
+          y1={height == null ? 0 : height}
+          x2={width == null ? 0 : width}
           y2={0}
           gradientUnits="userSpaceOnUse"
         >
diff --git a/src/line-chart/LineChart.tsx b/src/line-chart/LineChart.tsx
index 895e911a..f1930562 100644
--- a/src/line-chart/LineChart.tsx
+++ b/src/line-chart/LineChart.tsx
@@ -279,61 +279,66 @@ class LineChart extends AbstractChart<LineChartProps, LineChartState> {
       }
     } = this.props;
     const xMax = this.getXMaxValues(data);
-    data.forEach(dataset => {
-      if (dataset.withDots == false) return;
-
-      dataset.data.forEach((x, i) => {
-        if (hidePointsAtIndex.includes(i)) {
-          return;
-        }
+    
+    if (data != null){
+      data.forEach(dataset => {
+        if (dataset.withDots == false) return;
+        
+        if (dataset.data != null){
+          dataset.data.forEach((x, i) => {
+            if (hidePointsAtIndex.includes(i)) {
+              return;
+            }
 
-        const cx = paddingRight + (i * (width - paddingRight)) / xMax;
+            const cx = paddingRight + (i * (width - paddingRight)) / xMax;
 
-        const cy =
-          ((baseHeight - this.calcHeight(x, datas, height)) / 4) * 3 +
-          paddingTop;
+            const cy =
+              ((baseHeight - this.calcHeight(x, datas, height)) / 4) * 3 +
+              paddingTop;
 
-        const onPress = () => {
-          if (!onDataPointClick || hidePointsAtIndex.includes(i)) {
-            return;
-          }
+            const onPress = () => {
+              if (!onDataPointClick || hidePointsAtIndex.includes(i)) {
+                return;
+              }
 
-          onDataPointClick({
-            index: i,
-            value: x,
-            dataset,
-            x: cx,
-            y: cy,
-            getColor: opacity => this.getColor(dataset, opacity)
+              onDataPointClick({
+                index: i,
+                value: x,
+                dataset,
+                x: cx,
+                y: cy,
+                getColor: opacity => this.getColor(dataset, opacity)
+              });
+            };
+
+            output.push(
+              <Circle
+                key={Math.random()}
+                cx={cx}
+                cy={cy}
+                fill={
+                  typeof getDotColor === "function"
+                    ? getDotColor(x, i)
+                    : this.getColor(dataset, 0.9)
+                }
+                onPress={onPress}
+                {...this.getPropsForDots(x, i)}
+              />,
+              <Circle
+                key={Math.random()}
+                cx={cx}
+                cy={cy}
+                r="14"
+                fill="#fff"
+                fillOpacity={0}
+                onPress={onPress}
+              />,
+              renderDotContent({ x: cx, y: cy, index: i, indexData: x })
+            );
           });
-        };
-
-        output.push(
-          <Circle
-            key={Math.random()}
-            cx={cx}
-            cy={cy}
-            fill={
-              typeof getDotColor === "function"
-                ? getDotColor(x, i)
-                : this.getColor(dataset, 0.9)
-            }
-            onPress={onPress}
-            {...this.getPropsForDots(x, i)}
-          />,
-          <Circle
-            key={Math.random()}
-            cx={cx}
-            cy={cy}
-            r="14"
-            fill="#fff"
-            fillOpacity={0}
-            onPress={onPress}
-          />,
-          renderDotContent({ x: cx, y: cy, index: i, indexData: x })
-        );
+        }
       });
-    });
+    }
 
     return output;
   };
@@ -650,7 +655,7 @@ class LineChart extends AbstractChart<LineChartProps, LineChartState> {
 
   getXMaxValues = (data: Dataset[]) => {
     return data.reduce((acc, cur) => {
-      return cur.data.length > acc ? cur.data.length : acc;
+      return cur.data == null ? acc : cur.data.length > acc ? cur.data.length : acc;
     }, 0);
   };
 
@@ -667,7 +672,7 @@ class LineChart extends AbstractChart<LineChartProps, LineChartState> {
       "width" | "height" | "paddingRight" | "paddingTop" | "data"
     >
   ) => {
-    if (dataset.data.length === 0) {
+    if (dataset.data == null || dataset.data.length === 0) {
       return "M0,0";
     }
 
@@ -711,7 +716,7 @@ class LineChart extends AbstractChart<LineChartProps, LineChartState> {
     AbstractChartConfig,
     "data" | "width" | "height" | "paddingRight" | "paddingTop"
   >) => {
-    return data.map((dataset, index) => {
+    return data == null ? 0 : data.map((dataset, index) => {
       const result = this.getBezierLinePoints(dataset, {
         width,
         height,
@@ -759,7 +764,7 @@ class LineChart extends AbstractChart<LineChartProps, LineChartState> {
         }) +
         ` L${paddingRight +
           ((width - paddingRight) / xMax) *
-            (dataset.data.length - 1)},${(height / 4) * 3 +
+            (dataset.data == null ? 0 : dataset.data.length - 1)},${(height / 4) * 3 +
           paddingTop} L${paddingRight},${(height / 4) * 3 + paddingTop} Z`;
 
       return (