How to change the size of tick labels present in the Chart

plotly.js
1

We’re trying to change the tick labels of the chart. We’ve tried using a label input to increase or decrease the value and tried to extract the value with the help of getElementById. Then we define the label size inside the Plotly.restyle tag.

The code:

<head>
	<!-- Load plotly.js into the DOM -->
	<script src='https://cdn.plot.ly/plotly-2.24.1.min.js'></script>
</head>

<body>
  <input type="number" id="LabelSizeInput" placeholder="Enter label size" />
	<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>

The JS code:

function gaussianRand() {
  var rand = 0;
  for (var i = 0; i < 6; i += 1) {
    rand += Math.random();
  }
  return (rand / 6) - 0.5;
}

var X = [],
  Y = [],
  n = 100000,
  i;

for (i = 0; i < n; i += 1) {
  X.push(gaussianRand());
  Y.push(gaussianRand());
}

var data = [{
  type: "scattergl",
  mode: "markers",
  marker: {
    line: {
      width: 1,
      color: '#404040'
    }
  },
  x: X,
  y: Y
}];

var layout = {
  xaxis: {
    tickfont: {
      size: 12 // Set the desired size for x-axis tick values
    }
  },
  yaxis: {
    tickfont: {
      size: 12 // Set the desired size for y-axis tick values
    }
  }
};


Plotly.newPlot('myDiv', data, layout);

var inputElement = document.getElementById('LabelSizeInput');
inputElement.addEventListener('input', function() {
  var label_size = parseInt(inputElement.value);
  if (!isNaN(label_size)) {
    Plotly.restyle('myDiv', {
      'xaxis.tickfont.size': label_size,
      'yaxis.tickfont.size': label_size,
    });
  }
});