How can I right align my chart in its container?

plotly.js
1

Hello,

I’m wondering if there’s a way to right align my plotly chart.

Please have a look at the screen shot below of the two plotly charts. They both seem to be left aligned in their containers. But I would like the chart on the right to be right align (indicated by the red arrow).

right align
right align1203×725 25.7 KB

It’s an AngularJS application and I’m referencing the Plotly JS CDN at https://cdn.plot.ly/plotly-latest.min.js.

Here is the relevant code:

From the modal component:

<div style="width: 50%; border: 1px solid black;">
	<cebm-scatter-plot></cebm-scatter-plot>		<!-- this is the chart on the left -->
</div>
<div style="width: 50%; border: 1px solid black;">
	<cebm-time-series-chart></cebm-time-series-chart> 		<!-- this is the chart on the right -->
</div>

The scatter plot component (on the left):

<div style="width: 100%;">
    <div id="scatter-plot-chart"></div>
</div>

The time series component (on the right):

<div style="width: 100%; text-align: right;">
    <div id="time-series-chart"></div>
</div>

Congifuring the scatter plot (on the left):

var chartDiv = document.querySelector('#scatter-plot-chart');
Plotly.plot(chartDiv, [{
	type: 'scatter',
	mode: 'markers',
	x: data_x,
	y: data_y,
	xaxis: 'x',
	yaxis: 'y',
	name: xAxisLabel,
	marker: {
		color: 'red',
		size: 3
	}
}], {
	title: 'Scatter Plot',
	dragmode: 'lasso',
	autosize: false,
	width: 400,
	height: 400,
	margin: {
		l: 30,
		r: 1,
		b: 35,
		t: 23
	},
	paper_bgcolor: '#7f7f7f',
	plot_bgcolor: '#c7c7c7'
});

Configuring the time series plot (on the right):

var chartDiv = document.querySelector('#time-series-chart');
Plotly.plot(chartDiv, [{
	type: 'scatter',
	x: data_x,
	y: data_y,
	xaxis: 'x',
	yaxis: 'y',
	name: xAxisLabel,
	marker: {
		color: 'red',
		size: 3
	}
}], {
	title: 'Time Series',
	dragmode: 'lasso',
	autosize: false,
	width: 400,
	height: 400,
	margin: {
		l: 30,
		r: 1,
		b: 35,
		t: 23
	},
	paper_bgcolor: '#7f7f7f',
	plot_bgcolor: '#c7c7c7'
});

Can someone please tell me what modifications I have to make to get the time series chart (on the right) to right align in its container?

Thank you!