plotly.js, how to adjust title area size

Question

I have a scatter plot as shown below with code. How do I make the title area not take up this much space? Just to be clear, I don't mean the font size of the title, but the empty space the title area occupies.

var rstTrace = { 
    x:    x_data,
    y:    y_data,
    mode: 'markers',
    type: 'scatter',
    marker: {
        size: 3,
        color: chartMarkerColor
    }
};
var rstLayout = {
        height: 400,
        title: {
            text: 'My Title',
            font: {
                family: 'Tahoma',
                size:   15
            }
        },
        xaxis: {
            showline:  true,
            zeroline:  false,
            linecolor: '#D3D3D3', // light gray
            tickcolor: '#D3D3D3'
        },
        yaxis: {
            showline:  true,
            zeroline:  false,
            linecolor: '#D3D3D3',
            tickcolor: '#D3D3D3'
        },
        backgroundcolor: '#D3D3D3'
};
Plotly.newPlot('resultDiv', [rstTrace], rstLayout);

Answer 1

You can change the graph's top margin

https://plot.ly/javascript/setting-graph-size/#adjusting-height-width-and-margins

Example

var rstLayout = {
  margin:{
    t: 10
  }
};

The top margin however accounts for all the space above the chart, so if you wish to move the title up or down so that it isn't centered, you could also use this workaround:

document.querySelector('.gtitle').setAttribute('y', 100)

The position of the text element is controlled by the attributes x and y. You can change y to whatever value you see fit to move the title down. Note that you'd need to make sure this runs after the svg is loaded in the page.