diff --git a/src/charts/README.mdx b/src/charts/README.mdx
index 1e16f3c0..8bdf5c4f 100644
--- a/src/charts/README.mdx
+++ b/src/charts/README.mdx
@@ -34,7 +34,7 @@ You can also provide a `name` prop for the tooltip value and an array of `labels
 		color="highlight"
 	/>
 	<br />
-	<SimpleChart isEmpty height={125} color="highlight" />
+	<SimpleChart isEmpty height={125} color="positive" />
 </Playground>
 
 ## SimpleGauge
@@ -45,4 +45,6 @@ Takes a single `value` prop that must be a Number value between `0` and `1` whic
 	<SimpleGauge value={0.3} height={125} />
 	<br />
 	<SimpleGauge value={0.8} height={80} color="positive" />
+	<br />
+	<SimpleGauge isEmpty height={80} color="negative" />
 </Playground>
diff --git a/src/charts/SimpleGauge/StripesPattern.js b/src/charts/SimpleGauge/StripesPattern.js
new file mode 100644
index 00000000..e8b59f87
--- /dev/null
+++ b/src/charts/SimpleGauge/StripesPattern.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import styled from 'styled-components';
+import {getColorBlock} from '../../utils/colors';
+
+const Wrapper = styled.div`
+	height: 0;
+	color: ${p => getColorBlock(p.color, p.theme)};
+`;
+
+function StripesPattern({id, color}) {
+	return (
+		<Wrapper color={color}>
+			<svg
+				width="0"
+				height="0"
+				viewBox="0 0 20 20"
+				version="1.1"
+				xmlns="http://www.w3.org/2000/svg"
+				xmlnsXlink="http://www.w3.org/1999/xlink"
+			>
+				<defs>
+					<pattern
+						id={id}
+						patternUnits="userSpaceOnUse"
+						width="20"
+						height="20"
+					>
+						<g
+							stroke="none"
+							strokeWidth="1"
+							fill="none"
+							fillRule="evenodd"
+						>
+							<g fill="currentColor">
+								<polygon points="0 20 20 0 10 0 0 10" />
+								<polygon points="20 20 20 10 10 20" />
+							</g>
+						</g>
+					</pattern>
+				</defs>
+			</svg>
+		</Wrapper>
+	);
+}
+
+export default StripesPattern;
diff --git a/src/charts/SimpleGauge/index.js b/src/charts/SimpleGauge/index.js
index 2fe87e28..0be85905 100644
--- a/src/charts/SimpleGauge/index.js
+++ b/src/charts/SimpleGauge/index.js
@@ -4,9 +4,13 @@ import styled, {css} from 'styled-components';
 import {pxToRem} from '../../utils/units';
 import {getColorBlock} from '../../utils/colors';
 
+import CenterContent from '../../CenterContent';
+
 import useChartist from '../useChartist';
+import StripesPattern from './StripesPattern';
 
 const Wrapper = styled.div`
+	position: relative;
 	overflow: hidden;
 	${p =>
 		p.height &&
@@ -14,19 +18,25 @@ const Wrapper = styled.div`
 			height: ${pxToRem(p.height)};
 		`}
 
-	color: ${p => getColorBlock(p.color, p.theme)};
-
 	> svg {
 		vertical-align: middle;
+		color: ${p => getColorBlock(p.color, p.theme)};
+		${p =>
+			p.patternId &&
+			`
+			opacity: 0.2;
+		`}
 	}
 	.ct-slice-donut {
+		stroke: none;
 		fill: none;
 	}
 	.ct-series-a {
-		stroke: currentColor;
+		fill: ${p =>
+			p.patternId ? `url(#${p.patternId}) currentColor` : 'currentColor'};
 	}
 	.ct-series-b {
-		stroke: currentColor;
+		fill: currentColor;
 		opacity: 0.2;
 	}
 `;
@@ -34,16 +44,25 @@ const Wrapper = styled.div`
 const defaultOptions = {
 	donut: true,
 	donutWidth: '80%',
+	donutSolid: true,
 	startAngle: 270,
 	total: 200,
 	showLabel: false,
 	chartPadding: 0,
 };
 
-function SimpleGauge({value, height, color = 'links'}) {
+function SimpleGauge({
+	value,
+	height,
+	color = 'links',
+	isEmpty,
+	emptyContent = 'No data to display',
+}) {
 	const hostRef = useRef(null);
 
-	const fraction = value * 100;
+	const hasValue = typeof value !== 'undefined' && value !== null && !isEmpty;
+
+	const fraction = (hasValue ? value : Math.random()) * 100;
 
 	const options = {
 		...defaultOptions,
@@ -58,7 +77,23 @@ function SimpleGauge({value, height, color = 'links'}) {
 		options,
 	});
 
-	return <Wrapper ref={hostRef} height={height} color={color} />;
+	const patternId = `gauge-chart-${Math.random()}`;
+
+	return (
+		<Wrapper
+			ref={hostRef}
+			height={height}
+			color={color}
+			patternId={hasValue ? null : patternId}
+		>
+			{!hasValue && (
+				<CenterContent fillParent spacing="0">
+					{emptyContent}
+					<StripesPattern color={color} id={patternId} />
+				</CenterContent>
+			)}
+		</Wrapper>
+	);
 }
 
 export default SimpleGauge;