diff --git a/plugins/woocommerce-admin/client/components/chart/utils.js b/plugins/woocommerce-admin/client/components/chart/utils.js
index 27f7576d76a..bf95344e487 100644
--- a/plugins/woocommerce-admin/client/components/chart/utils.js
+++ b/plugins/woocommerce-admin/client/components/chart/utils.js
@@ -588,7 +588,9 @@ export const drawLines = ( node, data, params ) => {
 		.attr( 'role', 'region' )
 		.attr( 'aria-label', d => d.key );
 
-	const lineStroke = params.width <= 1329 || params.uniqueDates.length > 50 ? 2 : 3;
+	let lineStroke = params.width <= 1329 || params.uniqueDates.length > 50 ? 2 : 3;
+	lineStroke = params.width <= 783 ? 1.25 : lineStroke;
+	const dotRadius = params.width <= 1329 ? 4 : 6;
 
 	series
 		.append( 'path' )
@@ -609,10 +611,10 @@ export const drawLines = ( node, data, params ) => {
 			.data( ( d, i ) => d.values.map( row => ( { ...row, i, visible: d.visible, key: d.key } ) ) )
 			.enter()
 			.append( 'circle' )
-			.attr( 'r', 6 )
+			.attr( 'r', dotRadius )
 			.attr( 'fill', d => getColor( d.key, params ) )
 			.attr( 'stroke', '#fff' )
-			.attr( 'stroke-width', 3 )
+			.attr( 'stroke-width', lineStroke + 1 )
 			.style( 'opacity', d => {
 				const opacity = d.focus ? 1 : 0.1;
 				return d.visible ? opacity : 0;
@@ -658,10 +660,10 @@ export const drawLines = ( node, data, params ) => {
 		.data( d => d.values )
 		.enter()
 		.append( 'circle' )
-		.attr( 'r', 8 )
+		.attr( 'r', dotRadius + 2 )
 		.attr( 'fill', d => getColor( d.key, params ) )
 		.attr( 'stroke', '#fff' )
-		.attr( 'stroke-width', 4 )
+		.attr( 'stroke-width', lineStroke + 2 )
 		.attr( 'cx', d => params.xLineScale( new Date( d.date ) ) )
 		.attr( 'cy', d => params.yScale( d.value ) );