JimmyBanks JimmyBanks - 4 months ago 49
Javascript Question

plotly js remove title and title area

How does on remove the title from a plotly js chart?

Example chart I have is as follows

<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<div id="myDiv" style="width: 800px; height: 400px;"></div>
<script>

var trace1 = {
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
mode: 'markers'
};

var trace2 = {
x: [2, 3, 4, 5],
y: [16, 5, 11, 9],
mode: 'lines'
};

var trace3 = {
x: [1, 2, 3, 4],
y: [12, 9, 15, 12],
mode: 'lines+markers'
};

var data = [ trace1, trace2, trace3 ];

var layout = {
title:false
};

Plotly.newPlot('myDiv', data, layout);
</script>


This chart will have a title "false", I have also tried
var layout = {
showtitle:false
}

setting the title to null:
title:''
or simply removing the title line, doesn't display a title, but the title area which is approxiamtely 50px in height above the chart reserved for the title remains, how do I remove this title area?

Answer

By removing the title from the layout config it will no longer render it however the margins are still configured to create the space for it, you will need to override those default margins as explained here.

I have create a jsFiddle showing that config applied to generate the desired output.

This is the meat of it:

var layout = {
  margin: {
    l: 50,
    r: 50,
    b: 50,
    t: 50,
    pad: 4
  }
};
Comments