7

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.

enter image description here

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);
Indominus
  • 1,228
  • 15
  • 31

1 Answers1

5

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.

Sayegh
  • 1,381
  • 9
  • 17
  • 1
    This does move the position of the title text, but the size of the title area doesn't change. After the text is moved down closer to the chart, it leaves an even bigger empty space above the text. – Indominus Feb 23 '19 at 20:04
  • Have you tried adjusting the graph margins? https://plot.ly/javascript/setting-graph-size/#adjusting-height-width-and-margins. That should accomplish what you want. – Sayegh Feb 23 '19 at 20:12
  • It works to a certain extent, but I don't quite understand what this margin is. I put `margin:{t: 10}` in layout, it seems to change both the space above the title text and that below the text. Is this margin the margin of the entire chart or just the margin of the chart content (excluding title)? – Indominus Feb 23 '19 at 20:32
  • Yeah the top margin here refers to the entire space above the chart, not just the space between the chart and the text. You can try a combination of the code above and the margins to get to the look you want. – Sayegh Feb 23 '19 at 20:34