How do I add spacing between my chart and the axis labels?

plotly.js
1

Hello,

Please have a look at the screen shot below showing two plotly charts in my AngularJS application:

screen shot
screen shot1203×725 26.3 KB

The red arrows indicate that I’d like to add spacing between the chart itself and the labels. How can I add spacing where the red arrows point?

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'
});

Thank you for any help!