From 2551696c6a28363fffbeef0cd7d8026f567d2d36 Mon Sep 17 00:00:00 2001
From: Robert Elliott <robert.elliott@automattic.com>
Date: Wed, 17 Oct 2018 13:39:22 +0200
Subject: [PATCH] show circles if the width to x-tick ratio is greater than
 36px

---
 .../woocommerce-admin/client/components/chart/utils.js    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/plugins/woocommerce-admin/client/components/chart/utils.js b/plugins/woocommerce-admin/client/components/chart/utils.js
index 25b579610a8..27f7576d76a 100644
--- a/plugins/woocommerce-admin/client/components/chart/utils.js
+++ b/plugins/woocommerce-admin/client/components/chart/utils.js
@@ -588,7 +588,7 @@ export const drawLines = ( node, data, params ) => {
 		.attr( 'role', 'region' )
 		.attr( 'aria-label', d => d.key );
 
-	const lineStroke = params.width <= 1024 || params.uniqueDates.length > 50 ? 2 : 3;
+	const lineStroke = params.width <= 1329 || params.uniqueDates.length > 50 ? 2 : 3;
 
 	series
 		.append( 'path' )
@@ -603,16 +603,16 @@ export const drawLines = ( node, data, params ) => {
 		} )
 		.attr( 'd', d => params.line( d.values ) );
 
-	params.width / params.uniqueDates.length > 50 &&
+	params.width / params.uniqueDates.length > 36 &&
 		series
 			.selectAll( 'circle' )
 			.data( ( d, i ) => d.values.map( row => ( { ...row, i, visible: d.visible, key: d.key } ) ) )
 			.enter()
 			.append( 'circle' )
-			.attr( 'r', lineStroke * 2 )
+			.attr( 'r', 6 )
 			.attr( 'fill', d => getColor( d.key, params ) )
 			.attr( 'stroke', '#fff' )
-			.attr( 'stroke-width', lineStroke )
+			.attr( 'stroke-width', 3 )
 			.style( 'opacity', d => {
 				const opacity = d.focus ? 1 : 0.1;
 				return d.visible ? opacity : 0;