left align y-axis text

client/components/chart/charts.js

@@ -97,6 +97,7 @@ class D3Chart extends Component {
 			tooltipFormat,
 			type,
 			xFormat,
+			x2Format,
 			yFormat,
 		} = this.props;
 		const { width } = this.state;
@@ -128,6 +129,7 @@ class D3Chart extends Component {
 			uniqueKeys,
 			width: calculatedWidth,
 			xFormat: d3TimeFormat( xFormat ),
+			x2Format: d3TimeFormat( x2Format ),
 			xGroupScale: getXGroupScale( orderedKeys, xScale ),
 			xLineScale,
 			xScale,
@@ -210,6 +212,10 @@ D3Chart.propTypes = {
 	 * A datetime formatting string, passed to d3TimeFormat.
 	 */
 	xFormat: PropTypes.string,
+	/**
+	 * A datetime formatting string, passed to d3TimeFormat.
+	 */
+	x2Format: PropTypes.string,
 	/**
 	 * A number formatting string, passed to d3Format.
 	 */
@@ -229,6 +235,7 @@ D3Chart.defaultProps = {
 	type: 'line',
 	width: 600,
 	xFormat: '%Y-%m-%d',
+	x2Format: '',
 	yFormat: '.3s',
 };
 

client/components/chart/index.js

@@ -170,6 +170,7 @@ class Chart extends Component {
 						type={ this.props.type }
 						width={ chartDirection === 'row' ? width - 320 : width }
 						xFormat={ this.props.xFormat }
+						x2Format={ this.props.x2Format }
 						yFormat={ this.props.yFormat }
 					/>
 				</div>
@@ -200,6 +201,10 @@ Chart.propTypes = {
 	 * A datetime formatting string, passed to d3TimeFormat.
 	 */
 	xFormat: PropTypes.string,
+	/**
+	 * A datetime formatting string, passed to d3TimeFormat.
+	 */
+	x2Format: PropTypes.string,
 	/**
 	 * A number formatting string, passed to d3Format.
 	 */
@@ -209,7 +214,8 @@ Chart.propTypes = {
 Chart.defaultProps = {
 	data: [],
 	tooltipFormat: '%Y-%m-%d',
-	xFormat: '%Y-%m-%d',
+	xFormat: '%d',
+	x2Format: '%b %Y',
 	yFormat: '.3s',
 };
 

client/components/chart/style.scss

@@ -161,6 +161,7 @@
 		}
 	}
 	.y-axis {
+		text-anchor: start;
 		&.tick {
 			&text {
 				fill: $core-grey-dark-500;

client/components/chart/utils.js

@@ -233,7 +233,7 @@ export const drawAxis = ( node, params ) => {
 		.call(
 			d3AxisBottom( xScale )
 				.tickValues( params.uniqueDates.map( d => ( params.type === 'line' ? new Date( d ) : d ) ) )
-				.tickFormat( d => params.xFormat( d instanceof Date ? d : new Date( d ) ) )
+				.tickFormat( d => params.x2Format( d instanceof Date ? d : new Date( d ) ) )
 		)
 		.call( g => g.select( '.domain' ).remove() );
 
@@ -267,8 +267,8 @@ export const drawAxis = ( node, params ) => {
 	node
 		.append( 'g' )
 		.attr( 'class', 'axis y-axis' )
-		.attr( 'transform', 'translate(-20, 0)' )
-		.attr( 'text-anchor', 'left' )
+		.attr( 'transform', 'translate(-50, 0)' )
+		.attr( 'text-anchor', 'start' )
 		.call(
 			d3AxisLeft( params.yTickOffset )
 				.tickValues( yGrids )