Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

plotly.js reduce the margin between yAxis title and the axis numbers

i want to be able to reduce the margin between the yAxis title and the axis numbers, i cant find any property or function in plotly.js documentation mentioning it

enter image description here

an example of the code here

var trace1 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  name: 'Name of Trace 1',
  type: 'scatter'
};
var trace2 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [1, 0, 3, 2, 5, 4, 7, 6, 8],
  name: 'Name of Trace 2',
  type: 'scatter'
};
var data = [trace1, trace2];
var layout = {
  title: 'Plot Title',
  xaxis: {
    title: 'x Axis',
    titlefont: {
      family: 'Courier New, monospace',
      size: 18,
      color: '#7f7f7f'
    }
  },
  yaxis: {
    title: 'y Axis',
    titlefont: {
      family: 'Courier New, monospace',
      size: 18,
      color: '#7f7f7f'
    }
  }
};
Plotly.newPlot('myDiv', data, layout);

also here is a codepen link codepen

like image 646
Ahmed Farahat Avatar asked Dec 14 '22 00:12

Ahmed Farahat


1 Answers

If someone's searching for this solution , then it's available now , use the 'standoff' property .

Something like this :

 var layout = {
      margin: {t:0,r:0,b:0,l:20},
      xaxis: {
        automargin: true,
        tickangle: 90,
        title: {
          text: "Month",
          standoff: 20
        }},
      yaxis: {
        automargin: true,
        tickangle: 90,
        title: {
          text: "Temprature",
          standoff: 40
        }}}
like image 187
Aniket Warey Avatar answered Mar 15 '23 23:03

Aniket Warey