diff --git a/plugins/woocommerce-admin/client/components/chart/style.scss b/plugins/woocommerce-admin/client/components/chart/style.scss index d2556c38adb..29cb6e0e9ee 100644 --- a/plugins/woocommerce-admin/client/components/chart/style.scss +++ b/plugins/woocommerce-admin/client/components/chart/style.scss @@ -164,14 +164,14 @@ padding-top: 10px; stroke-width: 1; } - .axis-month { - .tick { - opacity: 0; - &:first-child { - opacity: 1; - } - } - } + // .axis-month { + // .tick { + // opacity: 0; + // &:first-child { + // opacity: 1; + // } + // } + // } .y-axis { text-anchor: start; &.tick { diff --git a/plugins/woocommerce-admin/client/components/chart/utils.js b/plugins/woocommerce-admin/client/components/chart/utils.js index c1bb86126ee..d4cc597aed1 100644 --- a/plugins/woocommerce-admin/client/components/chart/utils.js +++ b/plugins/woocommerce-admin/client/components/chart/utils.js @@ -240,7 +240,10 @@ export const drawAxis = ( node, params ) => { .call( d3AxisBottom( xScale ) .tickValues( params.uniqueDates.map( d => ( params.type === 'line' ? new Date( d ) : d ) ) ) - .tickFormat( d => params.x2Format( d instanceof Date ? d : new Date( d ) ) ) + .tickFormat( ( d, i ) => { + const monthDate = d instanceof Date ? d : new Date( d ); + return monthDate.getDate() === 1 || i === 0 ? ( d = params.x2Format( monthDate ) ) : ''; + } ) ) .call( g => g.select( '.domain' ).remove() ); diff --git a/plugins/woocommerce-admin/client/lib/date/index.js b/plugins/woocommerce-admin/client/lib/date/index.js index 8eb593f2925..b395eecd005 100644 --- a/plugins/woocommerce-admin/client/lib/date/index.js +++ b/plugins/woocommerce-admin/client/lib/date/index.js @@ -408,7 +408,11 @@ export function getDateFormatsForInterval( interval ) { xFormat = '%I %p'; tableFormat = 'h A'; break; + case 'day': + xFormat = '%d'; + break; case 'week': + xFormat = '%d'; tooltipFormat = __( 'Week of %B %d %Y', 'wc-admin' ); break; case 'quarter':