diff --git a/plugins/woocommerce-admin/client/components/chart/example.js b/plugins/woocommerce-admin/client/components/chart/example.js
index 8d95b924aec..4f891c5cc68 100644
--- a/plugins/woocommerce-admin/client/components/chart/example.js
+++ b/plugins/woocommerce-admin/client/components/chart/example.js
@@ -93,7 +93,7 @@ class WidgetCharts extends Component {
 					</ul>
 				</Card>
 				<Card title={ __( 'Store Charts', 'wc-admin' ) }>
-					<Chart data={ this.state.someOrders } title="Example Chart" />
+					<Chart data={ this.state.someOrders } title="Example Chart" layout="comparison" />
 				</Card>
 			</Fragment>
 		);
diff --git a/plugins/woocommerce-admin/client/components/chart/utils.js b/plugins/woocommerce-admin/client/components/chart/utils.js
index 123315a219b..a2968f4e3c0 100644
--- a/plugins/woocommerce-admin/client/components/chart/utils.js
+++ b/plugins/woocommerce-admin/client/components/chart/utils.js
@@ -99,10 +99,21 @@ export const getUniqueDates = ( lineData, parseDate ) => {
 };
 
 export const getColor = ( key, params ) => {
-	const keyValue =
-		params.orderedKeys.length > 1
-			? findIndex( params.orderedKeys, d => d.key === key ) / ( params.orderedKeys.length - 1 )
-			: 0;
+	const smallColorScales = [
+		[],
+		[ 0.5 ],
+		[ 0.333, 0.667 ],
+		[ 0.2, 0.5, 0.8 ],
+		[ 0.12, 0.375, 0.625, 0.88 ],
+	];
+	let keyValue = 0;
+	const len = params.orderedKeys.length;
+	const idx = findIndex( params.orderedKeys, d => d.key === key );
+	if ( len < 5 ) {
+		keyValue = smallColorScales[ len ][ idx ];
+	} else {
+		keyValue = idx / ( params.orderedKeys.length - 1 );
+	}
 	return params.colorScheme( keyValue );
 };