CODEWITHSUNDEEP
plotly.js
Indominus
Indominus

Reputation: 1258

plotly.js, how to adjust title area size

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

Upvotes: 7

Views: 6216

Answers (1)

Sayegh
Sayegh

Reputation: 1441

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.

Upvotes: 5

Related Questions